:root {
  --cardo-primary: #3366FF;
  --cardo-secondary: #20C7B7;
  --cardo-yellow: #FFC857;
  --cardo-coral: #FF6B5F;
  --cardo-navy: #172554;
  --cardo-background: #FAF8F4;
  --bg: #100d24;
  --bg2: #171032;
  --panel: rgba(255, 255, 255, 0.08);
  --panel2: rgba(255, 255, 255, 0.13);
  --line: rgba(255, 255, 255, 0.14);
  --text: #f7f7fb;
  --muted: #b9b6c9;
  --emerald: #20d39b;
  --gold: #f5bd4f;
  --coral: #ff6a5f;
  --blue: #5da9ff;
}

/* Cardo's light product palette. */
:root {
  --bg: var(--cardo-background); --bg2: #F2F6FF; --panel: rgba(255,255,255,.9); --panel2: #F3F7FF;
  --line: #DFE7F5; --text: var(--cardo-navy); --muted: #64748B; --emerald: var(--cardo-secondary);
  --gold: var(--cardo-yellow); --coral: var(--cardo-coral); --blue: var(--cardo-primary);
  --app-bg: #F4F7FF; --app-surface: #FFFFFF; --app-surface-2: #EEF4FF; --cyan: var(--cardo-secondary); --pink: var(--cardo-coral); --yellow: var(--cardo-yellow);
}
body { color:var(--cardo-navy); background:linear-gradient(135deg,#FAF8F4 0%,#F2F7FF 58%,#F7FCFB 100%); }
.bg-pattern { opacity:.32; background-image:linear-gradient(30deg,transparent 48%,rgba(51,102,255,.08) 49%,transparent 51%),linear-gradient(150deg,transparent 48%,rgba(32,199,183,.07) 49%,transparent 51%); }
.topbar { background:rgba(250,248,244,.88); border-bottom-color:#DFE7F5; box-shadow:0 6px 24px rgba(23,37,84,.06); }
.brand-logo { display:block; width:auto; height:42px; max-width:190px; object-fit:contain; }
.sidebar-logo .brand-logo { height:auto; width:min(166px,100%); max-width:none; }.brand-logo-auth { width:112px; height:auto; }
.main-btn { color:#fff; background:linear-gradient(135deg,var(--cardo-primary),#4F7BFF); box-shadow:0 10px 24px rgba(51,102,255,.22); }
.soft-btn { color:var(--cardo-primary); background:#EEF3FF; border-color:#D8E3FF; }.ghost-btn,.icon-btn { color:var(--cardo-navy); background:#fff; border-color:#DCE5F2; }
.nav-links { color:#52617A; }.nav-links a:hover,.mobile-drawer a:hover { color:var(--cardo-primary); }
.hero::before { background:linear-gradient(105deg,rgba(250,248,244,.97) 0%,rgba(250,248,244,.82) 42%,rgba(250,248,244,.2) 72%,rgba(250,248,244,.08) 100%),url("assets/cardo-hero.png") 72% center/cover no-repeat; }
.hero-copy>p,.section-title p { color:#5F6F8A; }.pill { color:#195E58; background:#E1FAF6; border-color:#AFEDE3; }.pill.gold { color:#805400; background:#FFF4D8; border-color:#FFE09B; }
.hero{min-height:min(760px,calc(100vh - 76px));padding-block:44px 34px}.hero h1{font-size:clamp(2.5rem,4.3vw,4.45rem);line-height:1.2}.hero-copy>p{max-width:590px;font-size:1rem}.hero-copy .main-btn{padding-inline:22px}.stats-strip{margin-top:22px}.stats-strip span{padding:11px 13px;border-radius:9px;background:#ffffffdf;box-shadow:0 8px 20px rgba(23,37,84,.08)}.hero-scene{min-height:530px}.live-room,.scene-player{background:#ffffffea;border-color:#dbe7f6;color:#172554;box-shadow:0 16px 35px rgba(23,37,84,.14)}.live-room small,.scene-player small{color:#667792}.scene-player>span{background:var(--cardo-secondary);color:#083b39}.landing-ticker{min-height:62px;background:#fff;border-block-color:#dce8fa;color:#3f5778}.landing-ticker i{color:var(--cardo-coral)}
.stats-strip { color:#52617A; }.stats-strip b { color:var(--cardo-navy); }.landing-ticker { color:#284469; background:#EEF4FF; border-block-color:#DCE7FF; }
.social-showcase { border-color:#DCE7F5; box-shadow:0 16px 44px rgba(23,37,84,.08); }.social-copy { background:#FFF; }.mode-card,.why-grid span,.faq details { background:rgba(255,255,255,.84); border-color:#DFE7F5; }
.mode-card.hot { background:linear-gradient(135deg,#E9F7FF,#EAFBF7); border-color:#AEE9E0; }.tour-feature { background:transparent; border-block-color:#DCE7F5; }
.modes{padding-block:56px;align-items:stretch;background:linear-gradient(90deg,#f4f8ff,#f3fffc);border-block-color:#dceaf5}.mode-card{position:relative;min-height:170px;padding:26px 24px;background:#fff;box-shadow:0 12px 28px rgba(23,37,84,.07)}.mode-card.hot{background:linear-gradient(145deg,#e9f4ff,#e9fffa);border-color:#97e2d7}.mode-card b{display:block;margin:8px 0;font-size:1.2rem;color:#1b3155}.mode-card p{margin:0;color:#667792;line-height:1.8;font-size:.9rem}.mode-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:#eaf0ff;color:var(--cardo-primary);font-size:20px}.mode-card.hot .mode-icon{background:#fff0c9;color:#9b6800}.why-grid{gap:18px}.why-card{min-height:140px;padding:18px;background:#fff!important;border:1px solid #dce7f5!important;box-shadow:0 10px 24px rgba(23,37,84,.06)}.why-card i{width:42px;height:42px;border-radius:8px}.why-card b{color:#1b3155}.why-card span{padding:0!important;background:transparent!important;border:0!important;color:#64748b;line-height:1.7}.responsible{margin-top:28px;padding-block:38px}.win-banner-copy{background:linear-gradient(90deg,rgba(23,37,84,.96),rgba(23,37,84,.73))}
.tour-feature>div,.tour-feature>div:first-child { color:#fff; background:linear-gradient(125deg,#3366FF,#4078F7 56%,#20C7B7); border-color:transparent; box-shadow:0 18px 42px rgba(51,102,255,.18); }.tour-feature .pill.gold { color:#795200; background:var(--cardo-yellow); border-color:transparent; }.tour-feature p { color:#EEF5FF; }.tour-feature .progress { background:rgba(255,255,255,.25); }.tour-feature .progress i { background:linear-gradient(90deg,var(--cardo-yellow),#FFF1B7); }.tour-feature .main-btn { color:var(--cardo-navy); background:var(--cardo-yellow); box-shadow:none; }.leader-mini span { color:#fff; background:rgba(23,37,84,.2); border-inline-start-color:var(--cardo-yellow); }
.responsible { color:#67453C; background:#FFF4F2; border-block-color:#FFD9D3; }.footer { background:rgba(255,255,255,.52); border-top-color:#DFE7F5; }
.app-shell { background:linear-gradient(135deg,#F7F9FF,#F0F8FF 58%,#F8FCFA); }.sidebar,.app-header,.start-card,.wallet-card,.xp-card,.mini-stat,.panel,.profile-card { background:rgba(255,255,255,.94); border-color:#DFE7F5; box-shadow:0 10px 30px rgba(23,37,84,.05); }.sidebar .logo { border-bottom-color:#DFE7F5; }.side-link { color:#53627B; }.side-link.active,.side-link:hover { color:var(--cardo-primary); background:#EDF3FF; box-shadow:inset 3px 0 var(--cardo-primary); }
.start-card { color:#fff; background:linear-gradient(125deg,#3366FF,#4A7CFA 58%,#20C7B7); }.start-card p { color:#EEF5FF; }.head-avatar,.big-avatar,.avatar-row span { color:#fff; background:linear-gradient(135deg,var(--cardo-primary),var(--cardo-secondary)); }
input,select { color:var(--cardo-navy); background:#fff; border-color:#DCE5F2; }.tabs button,.toolbar button { color:#53627B; background:#fff; border-color:#DCE5F2; }.tabs .active,.toolbar button.active { color:#fff; background:var(--cardo-primary); }.room-row,.tx-row,.leader-row,.friend-card { background:#F8FAFF; border-color:#E2E9F5; }.bottom-nav { background:rgba(255,255,255,.92); border-color:#DFE7F5; }.bottom-nav button.active { color:#fff; background:var(--cardo-primary); }.mobile-drawer,.modal-card { color:var(--cardo-navy); background:#fff; }.modal { background:rgba(23,37,84,.28); }.toast { color:#fff; background:var(--cardo-primary); }
@media (max-width:620px) { .hero::before { background:linear-gradient(180deg,rgba(250,248,244,.96),rgba(250,248,244,.36) 55%,rgba(250,248,244,.95)),url("assets/cardo-hero.png") 63% center/cover no-repeat; }.brand-logo { height:34px; max-width:155px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Alexandria", system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 20% 0%, #2c185d 0, transparent 35%), linear-gradient(135deg, var(--bg), #080915 70%);
  min-height: 100vh;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.bg-pattern {
  position: fixed; inset: 0; pointer-events: none; opacity: .16;
  background-image: linear-gradient(30deg, transparent 48%, rgba(255,255,255,.15) 49%, transparent 51%), linear-gradient(150deg, transparent 48%, rgba(255,255,255,.08) 49%, transparent 51%);
  background-size: 46px 46px;
}
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px clamp(16px, 4vw, 56px); background: rgba(16, 13, 36, .72); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.logo, .nav-links, .top-actions, .hero-buttons, .stats-strip, .tabs, .toolbar, .app-header, .avatar-row { display: flex; align-items: center; }
.logo { gap: 10px; }
.logo b { display: block; font-weight: 900; }
.logo small { color: var(--muted); font-size: .72rem; letter-spacing: 2px; }
.logo-mark {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px;
  background: conic-gradient(from 120deg, var(--emerald), var(--gold), var(--coral), var(--emerald));
  box-shadow: 0 0 35px rgba(32, 211, 155, .35);
}
.logo-mark span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--bg); font-weight: 900; }
.nav-links { gap: 22px; color: var(--muted); font-weight: 700; }
.nav-links a:hover, .mobile-drawer a:hover { color: var(--emerald); }
.main-btn, .soft-btn, .ghost-btn, .icon-btn, .danger-btn {
  border: 0; border-radius: 12px; color: var(--text); min-height: 42px; padding: 0 16px; font-weight: 800;
}
.main-btn { background: linear-gradient(135deg, var(--emerald), #13a578); color: #061712; box-shadow: 0 12px 34px rgba(32, 211, 155, .24); }
.soft-btn { background: rgba(255,255,255,.1); border: 1px solid var(--line); }
.ghost-btn { background: transparent; border: 1px solid var(--line); }
.icon-btn { width: 42px; padding: 0; background: rgba(255,255,255,.1); border: 1px solid var(--line); }
.danger-btn { background: rgba(255,106,95,.18); border: 1px solid rgba(255,106,95,.36); }
.mobile-menu { display: none; }
.mobile-drawer {
  position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(82vw, 340px); padding: 22px; display: grid; align-content: start; gap: 16px;
  background: rgba(18, 15, 42, .96); transform: translateX(110%); transition: .3s ease; border-left: 1px solid var(--line);
}
.mobile-drawer.open { transform: translateX(0); }
.close-menu { justify-self: start; }
.view { display: none; animation: fadeUp .45s ease both; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero {
  position: relative; isolation: isolate; min-height: min(860px, calc(100vh - 76px)); display: grid; grid-template-columns: minmax(390px, .82fr) minmax(460px, 1.18fr); align-items: center; gap: 20px;
  padding: 56px clamp(16px, 5vw, 70px) 46px; overflow: hidden;
}
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(7,10,20,.15), rgba(7,10,20,.94) 72%), url("assets/cardo-hero.png") center/cover no-repeat; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 65%, var(--bg) 100%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; max-width: 720px; padding: 28px 0; }
.pill { display: inline-flex; padding: 8px 12px; border-radius: 999px; color: var(--emerald); background: rgba(32,211,155,.1); border: 1px solid rgba(32,211,155,.25); font-weight: 800; }
.pill.gold { color: var(--gold); background: rgba(245,189,79,.12); border-color: rgba(245,189,79,.3); }
.hero h1 { margin: 18px 0; max-width: 680px; font-size: clamp(2.8rem, 4.8vw, 5rem); line-height: 1.14; letter-spacing: 0; text-wrap: balance; }
.hero p, .section-title p, .responsible p { color: var(--muted); line-height: 1.9; font-weight: 500; }
.hero-copy > p { max-width: 620px; font-size: 1.08rem; }
.hero-buttons, .stats-strip { gap: 12px; flex-wrap: wrap; }
.stats-strip { margin-top: 28px; }
.stats-strip span, .mode-card, .game-card, .panel, .wallet-card, .xp-card, .mini-stat, .profile-card, .settings-grid label {
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px); border-radius: 18px;
}
.stats-strip span { padding: 14px 16px; color: var(--muted); background: rgba(8,12,23,.55); }
.stats-strip b { color: var(--text); }
.hero-scene { position: relative; min-height: 600px; align-self: stretch; }
.live-room, .scene-player { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: rgba(8,13,22,.78); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.live-room { top: 13%; left: 1%; border-radius: 8px; }
.live-room div, .scene-player div { display: grid; gap: 3px; }
.live-room small, .scene-player small { color: var(--muted); }
.live-room > span:last-child { color: var(--gold); font-weight: 900; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 6px rgba(255,106,95,.13); animation: pulse 1.8s infinite; }
.scene-player { bottom: 9%; right: 8%; border-radius: 8px; }
.scene-player > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--emerald); color: #051713; font-weight: 900; }
.scene-suits { position: absolute; left: 3%; bottom: 20%; display: flex; gap: 8px; direction: ltr; }
.scene-suits i { display: grid; place-items: center; width: 38px; height: 48px; border-radius: 6px; background: rgba(246,240,221,.94); color: #111827; font-style: normal; font-size: 1.1rem; transform: rotate(var(--tilt, -6deg)); }
.scene-suits i:nth-child(2), .scene-suits i:nth-child(3) { color: #cc4b43; --tilt: 5deg; }
@keyframes pulse { 50% { opacity: .5; transform: scale(.82); } }
.landing-ticker { display: flex; align-items: center; justify-content: center; gap: clamp(18px,4vw,56px); min-height: 70px; padding: 14px clamp(16px,5vw,70px); overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--muted); font-weight: 700; }
.landing-ticker i { color: var(--gold); font-style: normal; }
.hero-table { position: relative; min-height: 540px; }
.felt-table, .play-table {
  position: absolute; inset: 18% 9%; border-radius: 38px; background: radial-gradient(circle, #1ecb97, #087f63 58%, #063d38);
  border: 12px solid #5d3b25; box-shadow: inset 0 0 0 10px rgba(255,255,255,.07), 0 30px 90px rgba(0,0,0,.35);
  transform: rotate(-8deg) skew(3deg);
}
.played-card { position: absolute; top: 38%; right: 38%; width: 86px; height: 120px; display: grid; place-items: center; border-radius: 14px; background: #fff7e8; color: #10101a; font-size: 44px; transform: rotate(8deg); }
.played-card.red { right: 49%; color: var(--coral); transform: rotate(-10deg); }
.chips { position: absolute; left: 18%; bottom: 22%; display: flex; gap: 6px; }
.chips span { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); border: 5px dashed rgba(0,0,0,.18); }
.avatar { position: absolute; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: linear-gradient(135deg, var(--panel2), rgba(32,211,155,.28)); border: 1px solid var(--line); font-weight: 900; }
.p1 { bottom: 5%; right: 42%; } .p2 { top: 6%; right: 42%; } .p3 { top: 42%; right: 0; } .p4 { top: 42%; left: 0; }
.float-card, .online-badge { position: absolute; z-index: 3; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid var(--line); font-weight: 900; animation: float 4s ease-in-out infinite; }
.ace { top: 8%; right: 10%; } .king { bottom: 14%; left: 12%; color: var(--coral); } .dice { top: 12%; left: 18%; color: var(--gold); }
.online-badge { right: 0; bottom: 18%; color: var(--emerald); animation-delay: .8s; }
@keyframes float { 50% { transform: translateY(-12px) rotate(3deg); } }
.section { padding: 104px clamp(20px, 6vw, 96px); }
#landing > .section + .section { margin-top: 28px; }
.section-title { max-width: 760px; margin-bottom: 38px; }
.section-title span { color: var(--gold); font-weight: 900; }
.section-title h2, .tour-feature h2, .why h2, .faq h2, .social-copy h2 { margin: 10px 0 0; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.35; }
.section-title p { max-width: 600px; margin-bottom: 0; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.game-card { position: relative; overflow: hidden; padding: 0; min-height: 410px; transition: .25s ease; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255,255,255,.055)); }
.game-card::after { content: ""; position: absolute; width: 150px; height: 150px; left: -45px; bottom: -60px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); filter: blur(35px); pointer-events: none; }
.game-card:hover { transform: translateY(-6px); border-color: rgba(32,211,155,.42); }
.game-image { height: 190px; overflow: hidden; background: #0b1020; }
.game-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.game-card:hover .game-image img { transform: scale(1.045); }
.game-body { position: relative; z-index: 1; padding: 21px; }
.game-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.demo-link { display:inline-flex; align-items:center; justify-content:center; }
.game-art { font-size: 54px; margin-bottom: 16px; }
.game-card h3 { margin: 0 0 10px; font-size: 1.45rem; }
.game-card p { color: var(--muted); line-height: 1.7; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.meta span { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); font-size: .82rem; }
.badge { position: absolute; top: 16px; left: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(245,189,79,.15); color: var(--gold); font-size: .78rem; font-weight: 900; }
.social-showcase { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: stretch; min-height: 560px; margin: 40px clamp(20px,6vw,96px) 80px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #101426; }
.social-showcase img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.social-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(34px,5vw,70px); background: linear-gradient(145deg, rgba(13,20,36,.96), rgba(15,54,46,.86)); }
.social-copy p { max-width: 520px; margin: 18px 0 28px; color: var(--muted); line-height: 1.9; }
.modes, .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; background: rgba(255,255,255,.022); border-block: 1px solid var(--line); }
.mode-card, .step { padding: 26px; }
.mode-card b { font-size: 1.35rem; }
.hot { background: linear-gradient(135deg, rgba(32,211,155,.2), rgba(255,106,95,.14)); }
.steps { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; background: rgba(255,255,255,.06); border-radius: 18px; border: 1px solid var(--line); }
.step span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #19121e; font-weight: 900; margin-bottom: 14px; }
.tour-feature { display: grid; grid-template-columns: 1.4fr .6fr; gap: 22px; align-items: stretch; margin-block: 28px; background: linear-gradient(110deg, rgba(30,205,232,.07), rgba(108,99,255,.07) 52%, rgba(255,79,135,.07)); border-block: 1px solid rgba(90,218,255,.24); }
.tour-feature > div { position: relative; overflow: hidden; padding: 34px; border-radius: 8px; background: linear-gradient(135deg, #17254d, #25377b 52%, #3f2f83); border: 1px solid rgba(126,220,255,.28); box-shadow: 0 20px 55px rgba(4,8,26,.25); }
.tour-feature > div:first-child { background: linear-gradient(125deg, #142750, #1c4b85 52%, #7045a0); }
.tour-feature .pill.gold { color: #18203d; background: #ffd447; border-color: #ffe782; box-shadow: 0 8px 24px rgba(255,212,71,.2); }
.tour-feature h2 { color: #fff; }
.tour-feature p { max-width: 700px; color: #dce9ff; line-height: 1.85; }
.tour-feature .progress { height: 10px; max-width: 720px; background: rgba(4,10,35,.42); border: 1px solid rgba(255,255,255,.12); }
.tour-feature .progress i { background: linear-gradient(90deg, #19d7e8, #6c63ff 52%, #ff4f87); }
.tour-feature .main-btn { background: #19d7e8; color: #071425; box-shadow: 0 12px 30px rgba(25,215,232,.22); }
.progress { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); margin: 14px 0; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), var(--gold)); border-radius: inherit; }
.leader-mini { display: grid; align-content: center; gap: 10px; }
.leader-mini b { margin-bottom: 8px; color: #fff; }
.leader-mini span { padding: 12px 14px; border-radius: 6px; color: #fff; background: rgba(8,15,42,.34); border-inline-start: 4px solid #19d7e8; }
.leader-mini span:nth-of-type(2) { border-inline-start-color: #ffd447; }
.leader-mini span:nth-of-type(3) { border-inline-start-color: #ff4f87; }
.why { margin-block: 28px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.why-grid span { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.responsible { border-block: 1px solid var(--line); background: rgba(255,106,95,.06); }
.faq details { padding: 18px; margin: 12px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.footer { display: flex; flex-wrap: wrap; gap: 16px; padding: 30px clamp(16px,5vw,70px); color: var(--muted); border-top: 1px solid var(--line); }
.footer b { color: var(--text); margin-left: 12px; }
.app-shell { min-height: calc(100vh - 78px); padding: 18px; }
.app-shell.active { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
.sidebar { position: sticky; top: 96px; align-self: start; display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.side-link { display: flex; justify-content: space-between; padding: 12px; border-radius: 12px; color: var(--muted); border: 1px solid transparent; }
.side-link.active, .side-link:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line); }
.app-content { min-width: 0; }
.app-header { justify-content: space-between; margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.player-head { display: flex; align-items: center; gap: 12px; }
.head-avatar, .big-avatar, .avatar-row span { display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, var(--emerald), var(--blue)); color: #061712; font-weight: 900; }
.head-avatar { width: 48px; height: 48px; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 16px; }
.start-card, .wallet-card, .xp-card, .mini-stat, .panel, .profile-card { padding: 20px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.start-card { grid-row: span 2; background: radial-gradient(circle at 10% 10%, rgba(245,189,79,.24), transparent 38%), linear-gradient(135deg, rgba(32,211,155,.18), rgba(255,255,255,.07)); }
.start-card h2 { font-size: clamp(1.8rem, 4vw, 3.6rem); margin: 14px 0; }
.wallet-card b, .xp-card b, .mini-stat b { display: block; margin-top: 10px; font-size: 1.7rem; }
.panel h3 { margin-top: 0; }
.room-row, .tx-row, .leader-row, .friend-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; margin: 10px 0; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.quest { padding: 10px 0; color: var(--muted); }
.avatar-row { gap: 8px; }
.avatar-row span { width: 42px; height: 42px; }
.toolbar, .tabs { gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
input, select { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.08); color: var(--text); padding: 0 14px; outline: 0; }
input::placeholder { color: var(--muted); }
.toolbar input { min-width: min(100%, 340px); }
.tabs button, .toolbar button { min-height: 40px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.08); color: var(--muted); padding: 0 14px; }
.tabs .active, .toolbar button.active { color: #061712; background: var(--emerald); }
.room-layout, .wallet-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; }
.game-preview { position: relative; min-height: 520px; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(circle at center, rgba(32,211,155,.16), rgba(255,255,255,.05)); overflow: hidden; }
.play-table { inset: 20% 18%; display: grid; place-items: center; text-align: center; transform: none; }
.play-table b { font-size: 3rem; }
.seat { position: absolute; z-index: 2; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid var(--line); text-align: center; }
.top { top: 6%; right: 44%; } .right { top: 42%; right: 5%; } .left { top: 42%; left: 5%; } .bottom { bottom: 9%; right: 44%; }
.hand { position: absolute; bottom: 2%; right: 30%; display: flex; gap: 6px; }
.hand i { display: grid; place-items: center; width: 46px; height: 64px; border-radius: 9px; background: #fff7e8; color: #111; font-weight: 900; transform: rotate(var(--r, -4deg)); }
.tournament-grid, .friend-grid, .settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bracket { display: grid; gap: 10px; margin-top: 16px; }
.leaderboard-list { display: grid; gap: 8px; }
.profile-card { text-align: center; }
.big-avatar { width: 112px; height: 112px; margin: 0 auto 16px; font-size: 3rem; }
.profile-card small { color: var(--muted); font-size: 1rem; }
.settings-grid label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; }
.bottom-nav { display: none; }
.modal { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; padding: 18px; background: rgba(3,4,12,.72); backdrop-filter: blur(10px); }
.modal.open { display: grid; }
.modal-card { width: min(520px, 100%); display: grid; gap: 12px; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: #171032; box-shadow: 0 24px 90px rgba(0,0,0,.45); }
.close-modal { justify-self: start; }
.wizard { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.wizard span { padding: 9px; text-align: center; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--muted); font-size: .8rem; }
.wizard .active { background: var(--emerald); color: #061712; }
.qr { display: grid; place-items: center; height: 150px; border-radius: 14px; color: var(--bg); background: repeating-linear-gradient(45deg, #fff 0 10px, #dfe7e3 10px 20px); font-weight: 900; font-size: 2rem; }
.warning { color: var(--gold); }
.toast { position: fixed; z-index: 60; bottom: 20px; right: 20px; padding: 14px 18px; border-radius: 14px; background: var(--emerald); color: #061712; font-weight: 900; transform: translateY(120px); transition: .25s ease; }
.toast.show { transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 980px) {
  .nav-links, .ghost-btn { display: none; } .mobile-menu { display: block; }
  .hero, .app-shell.active, .room-layout, .wallet-layout, .tour-feature { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-scene { min-height: 460px; }
  .social-showcase { grid-template-columns: 1fr; }
  .social-showcase img { min-height: 360px; max-height: 460px; }
  .sidebar { display: none; }
  .dash-grid, .game-grid, .modes, .steps, .why-grid, .tournament-grid, .friend-grid, .settings-grid { grid-template-columns: 1fr 1fr; }
  .bottom-nav { position: sticky; bottom: 10px; z-index: 10; display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; padding: 8px; margin-top: 16px; border-radius: 18px; background: rgba(16,13,36,.86); border: 1px solid var(--line); backdrop-filter: blur(16px); }
  .bottom-nav button { min-height: 42px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-size: .78rem; }
  .bottom-nav button.active { color: #061712; background: var(--emerald); }
}
@media (max-width: 620px) {
  .hero { padding: 34px 18px 24px; gap: 0; }
  .hero::before { background: linear-gradient(180deg, rgba(7,10,20,.94) 0%, rgba(7,10,20,.2) 52%, rgba(7,10,20,.86) 100%), url("assets/cardo-hero.png") 63% center/cover no-repeat; }
  .hero h1 { font-size: clamp(2.25rem, 10.5vw, 3.15rem); }
  .hero-copy > p { font-size: 1rem; }
  .hero-scene { min-height: 310px; }
  .live-room { top: 8%; left: 0; }
  .scene-player { bottom: 4%; right: 0; }
  .scene-suits { display: none; }
  .landing-ticker { justify-content: flex-start; overflow-x: auto; }
  .section { padding: 76px 20px; }
  #landing > .section + .section { margin-top: 20px; }
  .section-title { margin-bottom: 28px; }
  .social-showcase { min-height: 0; margin: 28px 16px 58px; }
  .social-showcase img { min-height: 280px; }
  .social-copy { padding: 30px 22px 34px; }
  .dash-grid, .game-grid, .modes, .steps, .why-grid, .tournament-grid, .friend-grid, .settings-grid { grid-template-columns: 1fr; }
  .app-header, .room-row, .tx-row, .leader-row, .friend-card { align-items: stretch; flex-direction: column; }
  .felt-table { inset: 22% 4%; }
  .avatar { width: 62px; height: 62px; }
  .p3 { right: 2%; } .p4 { left: 2%; }
}

/* Product UI system: player journey and room lobby */
:root { --app-bg:#0a1020; --app-surface:#111a2f; --app-surface-2:#17233e; --cyan:#24c8e8; --pink:#ff5f87; --yellow:#ffd447; }
.app-shell { background:linear-gradient(145deg,#080d19,#0e1730 60%,#121b35); }
.app-shell.active { grid-template-columns:238px minmax(0,1fr); gap:14px; }
.sidebar { top:92px; padding:12px; border-radius:8px; background:rgba(14,23,44,.92); box-shadow:0 20px 60px rgba(2,5,15,.24); }
.sidebar .logo { padding:10px 8px 18px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.side-link { min-height:44px; border-radius:6px; border:0; font:inherit; background:transparent; }
.side-link.active,.side-link:hover { background:#1c2b4b; box-shadow:inset 3px 0 var(--cyan); }
.app-header { min-height:74px; padding:12px 16px; border-radius:8px; background:rgba(17,26,47,.88); }
.head-avatar { border-radius:50%; background:var(--player-color,var(--cyan)); box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.notification-btn { position:relative; color:var(--pink); font-size:.6rem; }
.start-card,.wallet-card,.xp-card,.mini-stat,.panel,.profile-card { border-radius:8px; background:rgba(17,26,47,.86); }
.start-card { background:linear-gradient(125deg,#16345a,#28448b 58%,#67409c); }
.start-card h2 { max-width:650px; font-size:clamp(1.65rem,3vw,2.8rem); }
.rooms-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:4px 0 20px; }
.rooms-heading h2 { margin:5px 0; font-size:clamp(1.7rem,3vw,2.6rem); }
.rooms-heading p { margin:0; color:var(--muted); }
.eyebrow { color:var(--cyan); font-size:.76rem; font-weight:900; }
.room-filters { display:grid; grid-template-columns:minmax(230px,1fr) 180px 170px auto; gap:10px; margin-bottom:14px; padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(17,26,47,.82); }
.room-search { position:relative; display:flex; align-items:center; }
.room-search>span { position:absolute; right:13px; color:var(--muted); font-size:1.2rem; }
.room-search input { width:100%; padding-right:38px; }
.room-filters input,.room-filters select { border-radius:6px; background:#0b1327; }
.toggle-line { display:flex; align-items:center; gap:9px; min-height:44px; color:#d6dbea; font-size:.84rem; }
.toggle-line input { width:18px; min-height:18px; accent-color:var(--cyan); }
.room-tabs { margin:0 0 14px; border-bottom:1px solid var(--line); }
.room-tabs button { border:0; border-radius:0; background:transparent; }
.room-tabs button.active { color:var(--cyan); background:transparent; box-shadow:inset 0 -2px var(--cyan); }
.room-layout.upgraded { grid-template-columns:minmax(380px,.92fr) minmax(440px,1.08fr); gap:14px; }
.room-browser,.lobby-preview { min-height:610px; border:1px solid var(--line); border-radius:8px; background:rgba(17,26,47,.88); overflow:hidden; }
.room-list-head { display:flex; justify-content:space-between; padding:15px 17px; border-bottom:1px solid var(--line); }
.room-list-head span { color:var(--muted); font-size:.8rem; }
#roomsList { padding:8px; }
.room-item { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:12px; padding:13px; margin-bottom:7px; border:1px solid transparent; border-radius:7px; background:rgba(255,255,255,.035); cursor:pointer; transition:.2s; }
.room-item:hover,.room-item.selected { background:#192945; border-color:rgba(36,200,232,.38); }
.room-item.selected { box-shadow:inset 3px 0 var(--cyan); }
.room-game-icon { width:46px;height:46px;display:grid;place-items:center;border-radius:7px;color:var(--cyan);background:#0b152b;font-size:1.35rem; }
.room-info>div:first-child { display:flex; align-items:center; gap:10px; }
.room-info h3 { margin:0; font-size:.94rem; }
.room-info p { margin:6px 0; color:var(--muted); font-size:.76rem; }
.room-status { color:#94a0b8; font-size:.68rem; }
.room-status i { display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:#25dc9a; }
.room-tags { display:flex;gap:6px; }.room-tags span { padding:4px 7px;border-radius:4px;color:#c8d2e8;background:rgba(255,255,255,.06);font-size:.66rem; }
.join-room-btn { min-height:36px;padding:0 12px;border:0;border-radius:6px;color:#071521;background:var(--cyan);font-family:inherit;font-size:.78rem;font-weight:800;cursor:pointer; }
.room-empty { padding:50px 24px;text-align:center;color:var(--muted); }.room-empty b{color:#fff;}.room-empty p{line-height:1.8;}
.lobby-preview { padding:18px; background:linear-gradient(145deg,#101a30,#152342); }
.lobby-top { display:flex;justify-content:space-between;align-items:start; }.lobby-top>div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 8px;}.lobby-top h3{grid-column:1/-1;margin:7px 0 0;font-size:1.25rem}.lobby-top small{color:var(--muted)}
.room-code { direction:ltr;padding:7px 9px;border-radius:5px;background:#0a1328;color:var(--yellow);font:700 .75rem monospace; }
.lobby-table { position:relative; min-height:365px; margin:18px 0; border:8px solid #243253; border-radius:42%; background:radial-gradient(circle,#1f5577,#143c64 60%,#102b4b); box-shadow:inset 0 0 0 4px rgba(255,255,255,.06),0 20px 45px rgba(3,7,20,.3); }
.lobby-seat,.empty-seat { position:absolute; z-index:2; display:grid;justify-items:center;gap:3px;min-width:78px;padding:7px;border:0;color:#fff;background:transparent;font:inherit; }
.lobby-seat>span { width:43px;height:43px;display:grid;place-items:center;border-radius:50%;color:#08111f;background:var(--cyan);font-weight:900;box-shadow:0 0 0 4px #182640; }.lobby-seat b{font-size:.75rem}.lobby-seat small{color:#87f0c4;font-size:.65rem}.seat-north{top:-12px;right:50%;transform:translateX(50%)}.seat-east{top:42%;left:-18px}.seat-south{bottom:-12px;right:50%;transform:translateX(50%)}.seat-west{top:42%;right:-18px}.lobby-seat.me>span{color:#fff;background:var(--pink)}
.empty-seat { cursor:pointer; }.empty-seat b{width:42px;height:42px;display:grid;place-items:center;border:1px dashed #8291ad;border-radius:50%;color:var(--cyan);background:#111d35;font-size:1.2rem}.empty-seat span{color:#b3bdd1;font-size:.68rem}
.lobby-center { position:absolute;top:50%;left:50%;display:grid;justify-items:center;gap:4px;transform:translate(-50%,-50%); }.lobby-center span{color:var(--pink);font-size:2rem}.lobby-center small{color:#a9b6cc;font-size:.68rem}
.lobby-meta { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }.lobby-meta span{display:grid;gap:5px;padding:10px;border-radius:6px;background:#0c162b}.lobby-meta small{color:var(--muted);font-size:.67rem}.lobby-meta b{font-size:.82rem}
.lobby-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:14px }.lobby-actions .ready{background:#25dc9a;color:#07150f}
.auth-card,.onboarding-card,.room-create-card { border-radius:10px; background:#111a2f; }
.auth-card { width:min(460px,100%); }
.auth-brand { display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--line); }.auth-brand div{display:grid;gap:3px}.auth-brand small,.auth-card p,.onboarding-card p,.room-create-card p{color:var(--muted);line-height:1.7}.auth-card h2,.onboarding-card h2,.room-create-card h2{margin:6px 0 0}
.auth-fields,.room-create-card label,.onboarding-card label { display:grid;gap:7px;color:#cbd2e3;font-size:.78rem; }.auth-fields{gap:12px}.auth-fields input,.room-create-card input,.room-create-card select,.onboarding-card input{width:100%;border-radius:6px;background:#0a1327;}
.remember-row { display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.74rem}.remember-row span{display:flex;align-items:center;gap:6px}.remember-row input{min-height:auto}.remember-row button{border:0;color:var(--cyan);background:transparent;font:inherit;cursor:pointer}
.auth-divider { position:relative;text-align:center;color:var(--muted);font-size:.7rem}.auth-divider::before{content:"";position:absolute;top:50%;right:0;left:0;border-top:1px solid var(--line)}.auth-divider span{position:relative;padding:0 10px;background:#111a2f}
.avatar-picker { display:grid;grid-template-columns:repeat(6,1fr);gap:8px }.avatar-picker button{aspect-ratio:1;border:2px solid transparent;border-radius:50%;color:#08111f;background:var(--avatar);font:900 1.1rem inherit;cursor:pointer;box-shadow:inset 0 0 0 4px rgba(255,255,255,.18)}.avatar-picker button.selected{border-color:#fff;transform:translateY(-4px);box-shadow:0 8px 18px rgba(0,0,0,.3)}
.username-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:#0a1327}.username-field span{padding:0 12px;color:var(--cyan)}.username-field input{border:0;background:transparent}
.field-pair { display:grid;grid-template-columns:1fr 1fr;gap:10px }.room-create-card .wizard{grid-template-columns:repeat(3,1fr)}.room-create-card .wizard span{border-radius:5px}
@media(max-width:1100px){.room-layout.upgraded{grid-template-columns:1fr}.room-browser,.lobby-preview{min-height:auto}.room-filters{grid-template-columns:1fr 1fr}.room-search{grid-column:1/-1}}
@media(max-width:620px){.rooms-heading{align-items:stretch;flex-direction:column}.room-filters{grid-template-columns:1fr}.room-search{grid-column:auto}.room-item{grid-template-columns:42px 1fr}.join-room-btn{grid-column:1/-1}.lobby-preview{padding:12px}.lobby-table{min-height:320px;margin-inline:10px}.lobby-meta{grid-template-columns:1fr 1fr 1fr}.field-pair{grid-template-columns:1fr}.avatar-picker{grid-template-columns:repeat(3,1fr)}}

/* Final palette priority for the public site and player dashboard. */
body { color:#172554; background:linear-gradient(135deg,#FAF8F4,#F1F6FF 58%,#F8FCFA); }
.topbar { background:rgba(250,248,244,.92); border-bottom:1px solid #DFE7F5; }
.topbar .main-btn { color:#fff; background:linear-gradient(135deg,#3366FF,#4F7BFF); }.topbar .ghost-btn { color:#172554; background:#fff; border-color:#DCE5F2; }
.hero::before { background:linear-gradient(105deg,rgba(250,248,244,.98),rgba(250,248,244,.86) 42%,rgba(250,248,244,.28) 72%,rgba(250,248,244,.1)),url("assets/cardo-hero.png") 72% center/cover no-repeat; }
.hero-copy,.hero-copy h1 { color:#172554; }.hero-copy>p { color:#5F6F8A; }.hero .main-btn { color:#fff; background:#3366FF; }.hero .soft-btn { color:#3366FF; background:#fff; border-color:#C9D8FF; }
.section,.section h2,.section h3 { color:#172554; }.section-title p,.faq p { color:#64748B; }
.app-shell { color:#172554; background:linear-gradient(135deg,#F7F9FF,#F0F8FF 58%,#F8FCFA); }.sidebar,.app-header,.wallet-card,.xp-card,.mini-stat,.panel,.profile-card { color:#172554; background:rgba(255,255,255,.95); border-color:#DFE7F5; }.sidebar .logo { border-bottom-color:#DFE7F5; }.side-link { color:#53627B; }.side-link.active,.side-link:hover { color:#3366FF; background:#EDF3FF; box-shadow:inset 3px 0 #3366FF; }
.start-card { color:#fff; background:linear-gradient(125deg,#3366FF,#4A7CFA 58%,#20C7B7); }.start-card p { color:#EEF5FF; }.room-row,.tx-row,.leader-row,.friend-card { background:#F8FAFF; border-color:#E2E9F5; }.lobby-preview { background:linear-gradient(145deg,#fff,#F1F7FF); }.room-browser { background:#fff; }.room-filters { background:#fff; border-color:#DFE7F5; }.room-filters input,.room-filters select,.room-code,.lobby-meta span { color:#172554; background:#F8FAFF; border-color:#DFE7F5; }.auth-card,.onboarding-card,.room-create-card { color:#172554; background:#fff; }.auth-fields,.room-create-card label,.onboarding-card label { color:#53627B; }.auth-fields input,.room-create-card input,.room-create-card select,.onboarding-card input,.username-field { background:#fff; border-color:#DFE7F5; }.auth-divider span { background:#fff; }
@media(max-width:620px){.hero::before { background:linear-gradient(180deg,rgba(250,248,244,.96),rgba(250,248,244,.38) 55%,rgba(250,248,244,.96)),url("assets/cardo-hero.png") 63% center/cover no-repeat; }}

/* Cardo visual system: four clear accents, one calm neutral canvas. */
:root {
  --cardo-ink: #18264B;
  --cardo-blue-50: #EEF3FF;
  --cardo-teal-50: #E7FAF7;
  --cardo-yellow-50: #FFF7E6;
  --cardo-orange: #FF8A3D;
  --cardo-orange-50: #FFF0E6;
  --cardo-border: #E1E8F3;
}
body { background:#FAF8F4; color:var(--cardo-ink); }
.topbar { min-height:76px; background:rgba(255,255,255,.9); border-bottom-color:var(--cardo-border); }
.nav-links { gap:26px; color:#566783; }.nav-links a { position:relative; padding:8px 0; }.nav-links a:hover { color:#3366FF; }.nav-links a:hover::after { content:""; position:absolute; right:0; bottom:0; left:0; height:3px; border-radius:99px; background:#20C7B7; }
.main-btn { min-height:44px; color:#fff; background:#3366FF; box-shadow:0 10px 22px rgba(51,102,255,.19); }.main-btn:hover { background:#2858E8; transform:translateY(-1px); }
.soft-btn { min-height:44px; color:#1B60D9; background:var(--cardo-blue-50); border:1px solid #D8E4FF; }.soft-btn:hover { color:#124AB7; background:#E0EAFF; }
.ghost-btn,.icon-btn { min-height:42px; color:#344765; background:#fff; border-color:var(--cardo-border); }.ghost-btn:hover,.icon-btn:hover { color:#3366FF; border-color:#B9CEFF; background:#F8FAFF; }
.hero { min-height:650px; margin:0; }.hero::before { background:linear-gradient(90deg,rgba(250,248,244,.99) 0%,rgba(250,248,244,.94) 39%,rgba(250,248,244,.52) 62%,rgba(250,248,244,.15) 100%),url("assets/cardo-hero.png") 72% center/cover no-repeat; }
.hero-copy { max-width:590px; }.hero h1 { color:var(--cardo-ink); font-size:clamp(2.45rem,4.6vw,4.65rem); line-height:1.2; }.hero-copy>p { max-width:510px; color:#52637C; font-size:1.04rem; line-height:2; }
.pill { color:#067B70; background:var(--cardo-teal-50); border:1px solid #B8EDE6; }.pill.gold { color:#9A5A00; background:var(--cardo-yellow-50); border-color:#FFE0A4; }
.stats-strip { gap:10px; }.stats-strip span { color:#5D6E87; background:rgba(255,255,255,.78); border:1px solid var(--cardo-border); border-radius:10px; padding:10px 13px; }.stats-strip b { color:#1E4FD0; }
.landing-ticker { color:#4A6184; background:linear-gradient(90deg,#EDF3FF,#E8FAF6,#FFF7E6); border-block:1px solid #E0E8F4; }
.section { padding-block:88px; }.section-title>span,.eyebrow { color:#168F84; }.section-title h2,.social-copy h2,.why h2,.faq h2 { color:var(--cardo-ink); }.section-title p { color:#71809A; }
.game-card { min-height:0; border:1px solid var(--cardo-border); border-radius:8px; background:#fff; box-shadow:0 10px 26px rgba(30,51,92,.055); }.game-card::before { content:""; position:absolute; z-index:2; top:0; right:0; left:0; height:4px; background:var(--accent); }.game-card::after { opacity:.45; }.game-card:hover { border-color:color-mix(in srgb,var(--accent) 54%,#D8E3F1); box-shadow:0 18px 36px rgba(30,51,92,.12); }.game-body { background:#fff; }.game-card h3 { color:var(--cardo-ink); }.game-card p,.meta { color:#71809A; }.badge { color:#fff; background:var(--accent); box-shadow:none; }
.mode-card,.why-grid span,.faq details { color:var(--cardo-ink); border:1px solid var(--cardo-border); border-radius:8px; background:#fff; box-shadow:0 8px 22px rgba(30,51,92,.045); }.mode-card { border-top:4px solid #20C7B7; }.mode-card:nth-child(2) { border-top-color:#FFC857; }.mode-card:nth-child(3) { border-top-color:#FF8A3D; }.mode-card.hot { background:linear-gradient(135deg,#FFFDF7,#FFF5DD); border-color:#FFE2A9; }.step span { color:#fff; background:#3366FF; box-shadow:0 6px 14px rgba(51,102,255,.18); }.step:nth-child(2) span { background:#20C7B7; }.step:nth-child(3) span { background:#FFC857; color:#684100; }.step:nth-child(4) span { background:#FF8A3D; }
.social-showcase { border:1px solid var(--cardo-border); border-radius:8px; background:#fff; box-shadow:0 18px 42px rgba(30,51,92,.07); }.social-copy { background:linear-gradient(145deg,#fff,#F6FAFF); }
.tour-feature { gap:16px; padding:0; border:0; }.tour-feature>div,.tour-feature>div:first-child { border-radius:8px; background:linear-gradient(130deg,#3366FF 0%,#286CE8 56%,#20C7B7 100%); box-shadow:0 18px 40px rgba(43,97,210,.18); }.leader-mini { background:linear-gradient(145deg,#FFF9EB,#FFF0CE)!important; color:var(--cardo-ink)!important; border:1px solid #FFE0A4!important; box-shadow:none!important; }.leader-mini b { color:#7A4A00; }.leader-mini span { color:#4C5E78; background:#fff; border-inline-start-color:#FF8A3D; }.leader-mini span:nth-of-type(2) { border-inline-start-color:#20C7B7; }.leader-mini span:nth-of-type(3) { border-inline-start-color:#3366FF; }
.responsible { border:1px solid #FFDCC5; border-radius:8px; background:var(--cardo-orange-50); color:#8A4A1F; }.faq details[open] { border-color:#BFD7FF; box-shadow:0 10px 26px rgba(51,102,255,.08); }.faq summary { color:#21365B; }
.app-shell { background:linear-gradient(135deg,#F7FAFF 0%,#FDFBF7 58%,#F1FBF9 100%); }.sidebar,.app-header,.wallet-card,.xp-card,.mini-stat,.panel,.profile-card,.room-browser,.lobby-preview { border-color:var(--cardo-border); background:#fff; box-shadow:0 8px 24px rgba(30,51,92,.05); }.app-header { border-radius:8px; }.side-link.active,.side-link:hover { color:#1E5EE6; background:var(--cardo-blue-50); box-shadow:inset 3px 0 #3366FF; }.head-avatar,.big-avatar,.avatar-row span { background:linear-gradient(135deg,#3366FF,#20C7B7); }.start-card { background:linear-gradient(135deg,#3366FF,#2876EC 58%,#20C7B7); box-shadow:0 16px 34px rgba(43,97,210,.18); }.wallet-card { border-top:4px solid #FFC857; }.xp-card { border-top:4px solid #20C7B7; }.mini-stat:nth-of-type(4n) { border-top:4px solid #3366FF; }.mini-stat:nth-of-type(4n+1) { border-top:4px solid #FF8A3D; }
.room-item { background:#fff; border-color:#EDF1F7; }.room-item:hover,.room-item.selected { background:#F2F7FF; border-color:#BAD1FF; box-shadow:inset 3px 0 #3366FF; }.room-game-icon { color:#168F84; background:var(--cardo-teal-50); }.room-tags span { color:#5D6E87; background:#F4F7FB; }.join-room-btn { color:#fff; background:#3366FF; }.lobby-table { border-color:#23486E; background:radial-gradient(circle,#2F9D98,#1B6E79 57%,#184464); }.lobby-seat.me>span { background:#FF8A3D; }.lobby-center span { color:#FFC857; }.lobby-meta span { background:#F6F9FD; }.lobby-actions .ready { color:#fff; background:#20C7B7; }
@media(max-width:620px){.hero { min-height:700px; }.hero::before { background:linear-gradient(180deg,rgba(250,248,244,.94),rgba(250,248,244,.44) 55%,rgba(250,248,244,.92)),url("assets/cardo-hero.png") 63% center/cover no-repeat; }.section { padding-block:64px; }}

/* Bright Cardo palette: blue, teal, yellow and coral, without navy UI surfaces. */
:root { --text:#30466B; --muted:#6A7D9D; --cardo-ink:#30466B; --cardo-navy:#30466B; --cardo-border:#DDE7F5; }
body,.section,.app-shell { color:#30466B; }
.topbar { background:rgba(255,255,255,.94); }.nav-links { color:#627697; }.nav-links a:hover { color:#3366FF; }
.hero::before { background:linear-gradient(90deg,rgba(255,251,241,.98) 0%,rgba(255,251,241,.92) 35%,rgba(255,251,241,.42) 58%,rgba(255,251,241,.06) 100%),url("assets/cardo-hero-cartoon.png") center/cover no-repeat; }
.hero h1,.hero-copy,.hero-copy h1 { color:#30466B; }.hero-copy>p { color:#587093; }.hero .soft-btn { color:#168F84; background:#F0FFFB; border-color:#BDEEE7; }.hero .main-btn { background:#3366FF; }.live-room { color:#30466B; background:rgba(255,255,255,.9); border-color:#CDE9E5; }.live-room b { color:#168F84; }.scene-player { color:#30466B; background:rgba(255,255,255,.93); border-color:#DDE7F5; }.scene-player b { color:#3366FF; }.scene-suits i { color:#FF6B5F; background:#fff; border-color:#FAD3CE; }
.stats-strip span { color:#587093; background:#fff; border-color:#DDE7F5; }.stats-strip b { color:#3366FF; }.landing-ticker { color:#466184; }
.section-title h2,.social-copy h2,.why h2,.faq h2,.game-card h3,.mode-card,.why-card b { color:#30466B; }.section-title p,.game-card p,.why-card span { color:#6A7D9D; }
.why { padding-top:96px; padding-bottom:96px; background:linear-gradient(180deg,transparent 0%,#F5FAFF 20%,#F8FCFB 100%); }.why-title { max-width:620px; margin-bottom:32px; }.why-grid { grid-template-columns:repeat(4,1fr); gap:16px; margin-top:0; }.why-card { min-height:190px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:22px; border:1px solid #E1EAF6; border-radius:8px; background:#fff; box-shadow:0 12px 30px rgba(51,102,255,.06); transition:transform .2s ease,box-shadow .2s ease; }.why-card:hover { transform:translateY(-5px); box-shadow:0 20px 36px rgba(51,102,255,.13); }.why-card i { width:48px; height:48px; display:grid; place-items:center; border-radius:8px; font-style:normal; font-size:1.45rem; }.why-card div { display:grid; gap:7px; }.why-card b { font-size:1.08rem; }.why-card span { font-size:.82rem; line-height:1.8; }.why-card.blue { border-top:4px solid #3366FF; }.why-card.blue i { color:#3366FF; background:#EEF3FF; }.why-card.teal { border-top:4px solid #20C7B7; }.why-card.teal i { color:#078C80; background:#E8FAF7; }.why-card.yellow { border-top:4px solid #FFC857; }.why-card.yellow i { color:#A56800; background:#FFF7E5; }.why-card.coral { border-top:4px solid #FF6B5F; }.why-card.coral i { color:#E45147; background:#FFF0EE; }
.sidebar,.app-header,.panel,.wallet-card,.xp-card,.mini-stat,.profile-card,.room-browser,.lobby-preview { color:#30466B; }.side-link { color:#607392; }.side-link.active,.side-link:hover { color:#3366FF; }.room-info h3,.lobby-top h3,.lobby-meta b,.profile-card h2 { color:#30466B; }.room-info p,.room-status,.lobby-top small,.lobby-meta small { color:#6A7D9D; }
@media(max-width:980px){.why-grid { grid-template-columns:1fr 1fr; }}
@media(max-width:620px){.hero { min-height:690px; }.hero::before { background:linear-gradient(180deg,rgba(255,251,241,.95) 0%,rgba(255,251,241,.45) 54%,rgba(255,251,241,.9) 100%),url("assets/cardo-hero-cartoon.png") 67% center/cover no-repeat; }.hero-copy { max-width:100%; }.why { padding-top:68px; padding-bottom:68px; }.why-grid { grid-template-columns:1fr; }.why-card { min-height:150px; }}

@media(min-width:981px){.hero-copy { grid-column:2; max-width:520px; transform:translateX(-88px); }.hero-scene { grid-column:1; grid-row:1; }}

/* Keep the hero illustration vivid: no pale layer is placed over the artwork. */
.hero::before { background:url("assets/cardo-hero-cartoon.png") center/cover no-repeat; }
.hero::after { display:none; }
.hero-copy { padding:34px 0; text-shadow:none; }
.hero h1 { max-width:500px; color:#2457B7; text-shadow:0 1px 0 rgba(255,255,255,.65); }
.hero-copy>p { max-width:500px; color:#385F94; font-weight:800; text-shadow:0 1px 0 rgba(255,255,255,.72); }
.hero .pill { background:rgba(232,250,247,.9); backdrop-filter:blur(8px); }
.hero .soft-btn,.stats-strip span,.live-room,.scene-player { box-shadow:0 8px 20px rgba(39,80,142,.12); }

/* Section rhythm and colorful, restrained surfaces. */
#landing > .section:nth-of-type(2n) { background:linear-gradient(135deg,#F7FAFF,#F4FCFA); }
#landing > .section:nth-of-type(2n + 1) { background:#FFFCF7; }
.section-title { position:relative; padding-inline-start:18px; }.section-title::before { content:""; position:absolute; inset:4px auto 4px 0; width:4px; border-radius:99px; background:#20C7B7; }.section-title h2 { letter-spacing:0; }
.game-grid { gap:18px; }.game-card { overflow:hidden; }.game-card .game-image { border-bottom:1px solid #EEF2F7; }.game-card .game-actions { padding-top:4px; }.game-card .main-btn { min-height:38px; box-shadow:none; }.game-card .soft-btn { min-height:38px; background:#F0FBF9; color:#168F84; border-color:#C6EEE8; }
.modes { gap:18px; }.mode-card { position:relative; overflow:hidden; }.mode-card::after { content:""; position:absolute; width:92px; height:92px; left:-38px; bottom:-42px; border-radius:50%; background:rgba(32,199,183,.10); }.mode-card:nth-child(2)::after { background:rgba(255,200,87,.16); }.mode-card:nth-child(3)::after { background:rgba(255,107,95,.11); }
.steps { gap:12px; padding-top:44px; padding-bottom:44px; background:#fff!important; border-block:1px solid #E6EDF6; }.step { background:#fff; border:1px solid #E1E9F4; border-radius:8px; box-shadow:0 8px 18px rgba(51,102,255,.045); }
.tour-feature { margin-block:52px; }.tour-feature>div:first-child { position:relative; }.tour-feature>div:first-child::after { content:""; position:absolute; left:-32px; bottom:-45px; width:160px; height:160px; border:24px solid rgba(255,200,87,.2); border-radius:50%; }.tour-feature .main-btn { position:relative; z-index:1; }
.why { background:linear-gradient(135deg,#F3F8FF,#F8FFFD)!important; }.why-card { background:rgba(255,255,255,.96); }.responsible { box-shadow:0 10px 22px rgba(255,138,61,.08); }.faq { background:#fff!important; }.faq details { border-radius:8px; }.faq summary { cursor:pointer; }
@media(max-width:620px){.hero::before { background:url("assets/cardo-hero-cartoon.png") 61% center/cover no-repeat; }.hero h1 { color:#2457B7; text-shadow:0 1px 0 rgba(255,255,255,.7); }.hero-copy>p { color:#385F94; text-shadow:0 1px 0 rgba(255,255,255,.78); }}

/* RTL hero composition: game scene left, clear copy zone right. */
.hero::before { transform:scaleX(-1); transform-origin:center; }
@media(min-width:981px){.hero-copy { grid-column:1; max-width:520px; transform:translateX(52px); }.hero-scene { grid-column:2; grid-row:1; }}

.win-banner { position:relative; min-height:310px; margin:48px clamp(20px,6vw,96px) 12px; overflow:hidden; border-radius:8px; background:#3366FF; box-shadow:0 20px 48px rgba(51,102,255,.18); }
.win-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.win-banner-copy { position:relative; z-index:1; width:min(47%,550px); min-height:310px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; margin-right:auto; padding:38px clamp(28px,5vw,68px); color:#fff; }
.win-banner-copy span { padding:7px 11px; border-radius:999px; color:#174D9E; background:#FFC857; font-size:.78rem; font-weight:900; }
.win-banner-copy h2 { max-width:420px; margin:14px 0 8px; color:#fff; font-size:clamp(1.8rem,3.2vw,3.35rem); line-height:1.25; }
.win-banner-copy p { max-width:360px; margin:0 0 20px; color:#fff; font-weight:700; line-height:1.8; }
.banner-cta { min-height:44px; padding:0 18px; border:0; border-radius:8px; color:#3366FF; background:#fff; box-shadow:0 10px 20px rgba(19,57,146,.2); font:800 .9rem inherit; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.banner-cta:hover { transform:translateY(-2px); box-shadow:0 14px 26px rgba(19,57,146,.3); }

/* Softer section transitions and lively surface cadence. */
#landing { overflow:hidden; }.landing-ticker { position:relative; z-index:2; }.section,.social-showcase,.win-banner { transition:transform .25s ease,box-shadow .25s ease; }
.section-title::before { background:linear-gradient(#3366FF,#20C7B7); }.section-title>span { color:#20A999; }.section-title h2 { color:#30466B; }
.game-card { transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }.game-card:hover { transform:translateY(-7px); }
.social-showcase:hover { box-shadow:0 24px 48px rgba(51,102,255,.12); }.why-card { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
@media(max-width:980px){.win-banner-copy { width:min(58%,460px); }}
@media(max-width:620px){.hero::before { transform:scaleX(-1); background-position:39% center; }.hero-copy { transform:none; }.win-banner { min-height:390px; margin:30px 16px 6px; }.win-banner img { object-position:61% center; }.win-banner-copy { width:100%; min-height:390px; margin-right:0; justify-content:flex-start; padding:26px 22px; background:linear-gradient(90deg,rgba(51,102,255,.2),transparent 80%); }.win-banner-copy h2 { max-width:250px; font-size:2rem; }.win-banner-copy p { max-width:230px; font-size:.84rem; }}

/* Production-ready account, friend and room controls. */
.friend-add-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; }.friend-id-field { position:relative; flex:1; }.friend-id-field>span { position:absolute; z-index:1; top:50%; right:14px; transform:translateY(-50%); color:#3366FF; font-weight:900; }.friend-id-field input { width:100%; padding-right:34px; }.friend-helper { margin:0 0 18px; color:#6A7D9D; font-size:.83rem; }
.terms-line { display:flex; align-items:flex-start; gap:8px; color:#52657F; font-size:.78rem; line-height:1.7; }.terms-line input { min-height:auto; margin-top:4px; accent-color:#3366FF; }.room-invites { display:grid; gap:10px; padding:14px; border:1px solid #DCE7F5; border-radius:8px; background:#F7FAFF; }.room-invites>div:first-child { display:grid; gap:3px; }.room-invites b { color:#30466B; font-size:.87rem; }.room-invites small { color:#71809A; font-size:.72rem; }.invitee-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.invitee-list label { display:flex; align-items:center; gap:6px; min-height:38px; padding:7px 9px; border:1px solid #DFE8F3; border-radius:6px; color:#405674; background:#fff; cursor:pointer; }.invitee-list input { min-height:auto; accent-color:#20C7B7; }.invitee-list small { margin-right:auto; color:#20A999; font-size:.64rem; }.room-invites+ .toggle-line { margin-top:2px; }
.signup-only[hidden] { display:none!important; }
.account-id-note { margin:0; padding:10px 12px; border:1px solid #BDEEE7; border-radius:6px; color:#168F84!important; background:#F0FFFB; font-size:.76rem; line-height:1.7; }.account-id-display { display:grid; gap:5px; padding:13px; border:1px solid #D6E3FF; border-radius:8px; background:#F4F7FF; }.account-id-display span { color:#6B7D99; font-size:.74rem; }.account-id-display b { direction:ltr; color:#3366FF; font:800 1.08rem monospace; }.account-id-display small { color:#6A7D9D; font-size:.7rem; }.payout-summary { display:grid; gap:4px; padding:12px 14px; border:1px solid #FFE1A5; border-radius:8px; background:#FFF9EA; color:#7C5700; }.payout-summary span { display:flex; justify-content:space-between; gap:12px; }.payout-summary b { color:#E06A18; }.payout-summary small { color:#8B6B22; font-size:.72rem; }
@media(max-width:620px){.friend-add-bar { align-items:stretch; flex-direction:column; }.invitee-list { grid-template-columns:1fr; }}