/* ChessPicker Commercial UI Layer — visual-only, preserves existing feature logic */
:root{--cp-navy:#071a2d;--cp-navy2:#0b2847;--cp-blue:#2f8cff;--cp-cyan:#5dd6ff;--cp-gold:#f7c948;--cp-green:#33d69f;--cp-surface:rgba(255,255,255,.88);--cp-line:rgba(30,72,110,.13);--cp-shadow:0 24px 70px rgba(8,31,53,.12);--cp-shadow2:0 12px 34px rgba(8,31,53,.10)}
html{scroll-behavior:smooth}body{background:radial-gradient(circle at 8% 8%,rgba(47,140,255,.09),transparent 28%),radial-gradient(circle at 92% 14%,rgba(51,214,159,.08),transparent 28%),linear-gradient(180deg,#f9fbff 0,#eef5fa 48%,#f8fbff 100%)!important;background-attachment:fixed!important}.topbar,.gr-top,body>header:not(.kid-topbar):not(.top){backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.topbar{height:78px!important;background:rgba(6,25,44,.94)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 10px 30px rgba(0,0,0,.12)!important}.topbar .brand strong,.topbar .brand small,.topbar .navlinks a,.topbar .language-picker{color:#fff!important}.topbar .brand small{opacity:.68}.topbar .series-logo{box-shadow:0 0 0 1px rgba(255,255,255,.13),0 8px 26px rgba(0,0,0,.22)}.topbar .navlinks{gap:7px!important;align-items:center}.topbar .navlinks a{padding:9px 12px;border-radius:999px;transition:.25s ease;white-space:nowrap}.topbar .navlinks a:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}.topbar .game-room-link:first-child{background:linear-gradient(135deg,#1560bd,#2f8cff);box-shadow:0 8px 22px rgba(47,140,255,.28)}.topbar .language-picker select{border:1px solid rgba(255,255,255,.16)!important;background:#102d4a!important;color:#fff!important;border-radius:999px!important;padding:8px 28px 8px 11px!important}
.hero{position:relative;min-height:520px;margin:22px 8px 26px!important;padding:58px clamp(28px,5vw,78px)!important;border-radius:32px;overflow:hidden;background:linear-gradient(125deg,#07192b 0%,#0c3158 55%,#0a5370 100%);box-shadow:0 30px 90px rgba(6,35,64,.22);isolation:isolate}.hero:before{content:"";position:absolute;width:550px;height:550px;right:-140px;top:-250px;border-radius:50%;background:radial-gradient(circle,rgba(93,214,255,.28),transparent 67%);animation:cpFloat 9s ease-in-out infinite;z-index:-1}.hero:after{content:"♞";position:absolute;right:4%;bottom:-12%;font:700 clamp(240px,27vw,430px)/1 Georgia,serif;color:rgba(255,255,255,.045);transform:rotate(-8deg);z-index:-1}.hero .eyebrow{color:#70ddff!important;letter-spacing:.22em}.hero h1{color:#fff!important;max-width:900px!important;font-size:clamp(40px,5.2vw,78px)!important;line-height:.98!important;letter-spacing:-2.8px!important;text-wrap:balance}.hero p{color:rgba(235,245,255,.8)!important;max-width:860px!important;font-size:clamp(15px,1.25vw,19px)!important}.hero p a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.38)}.hero-card{min-width:330px!important;padding:28px!important;border:1px solid rgba(255,255,255,.14)!important;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.06))!important;backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.18)!important;position:relative;overflow:hidden}.hero-card:after{content:"♜  ♞  ♝  ♛";display:block;margin-top:21px;letter-spacing:.18em;font-size:30px;color:#f7c948;opacity:.9}.hero-card strong a{color:#fff;text-decoration:none}.hero-card strong{font-size:26px!important}
.cp-trust-strip{margin:-8px 18px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.cp-trust-item{background:rgba(255,255,255,.78);border:1px solid var(--cp-line);box-shadow:var(--cp-shadow2);border-radius:17px;padding:15px 18px;display:flex;gap:12px;align-items:center;transition:.25s ease}.cp-trust-item:hover{transform:translateY(-4px);box-shadow:var(--cp-shadow)}.cp-trust-item span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#e9f4ff,#f4fbff);font-size:20px}.cp-trust-item b{display:block;color:#102e4b}.cp-trust-item small{color:#6c7d8f}
.level-gate,.learning-shell,.popular-study-bar,.play-panel,.info-section .card,.how-card{border-color:var(--cp-line)!important;box-shadow:var(--cp-shadow2)!important}.level-gate{padding:25px!important;border-radius:24px!important;background:rgba(255,255,255,.92)!important;position:relative;overflow:hidden}.level-gate:before{content:"01";position:absolute;right:18px;top:-15px;font:900 95px/1 system-ui;color:rgba(20,77,127,.035)}.level-btn,.course-btn,.ghost,.popular-study-open,.practice-btn,.primary-action{transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important}.level-btn:hover,.course-btn:hover,.ghost:hover,.popular-study-open:hover,.practice-btn:hover,.primary-action:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,51,84,.14)}.level-btn.primary,.course-btn.active,.controls .play,.popular-study-open{background:linear-gradient(135deg,#0a3156,#1769aa)!important;border-color:transparent!important}.popular-study-bar{margin:0 8px 14px!important;border-radius:18px!important;background:linear-gradient(90deg,#fff,#f3f9ff)!important}.learning-shell{border-radius:28px!important;overflow:hidden!important;background:rgba(255,255,255,.94)!important}.library-panel{background:linear-gradient(180deg,#f9fbfd,#f2f7fb)!important}.opening-item{transition:.18s ease!important}.opening-item:hover{transform:translateX(3px)}.viewer-head{padding-bottom:12px;border-bottom:1px solid #e8eef4}.board-wrap{box-shadow:0 18px 48px rgba(5,30,51,.20)!important}.teacher-card,.pgn-card,.mini-grid>*,.famous-select,.famous-meta{border-radius:15px!important;box-shadow:0 4px 18px rgba(11,51,84,.06)}.info-section{margin-top:30px!important;padding:55px 34px!important;border-radius:28px;background:linear-gradient(135deg,#071a2d,#0c3158);color:#fff}.info-section h2,.info-section .eyebrow{color:#fff!important}.info-section p{color:rgba(238,246,255,.72)!important}.how-card{transition:.25s ease}.how-card:hover{transform:translateY(-5px);border-color:rgba(47,140,255,.28)!important}.how-card>strong{background:linear-gradient(145deg,#e9f4ff,#dff7f0)!important}
footer{margin-top:24px!important;background:#071a2d!important;color:rgba(255,255,255,.62)!important;border:0!important;padding:28px clamp(18px,3vw,42px)!important}footer a{color:#7fdfff!important}
.cp-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.cp-reveal.cp-visible{opacity:1;transform:none}.cp-shine{position:relative;overflow:hidden}.cp-shine:before{content:"";position:absolute;inset:-140% auto -140% -35%;width:22%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:cpShine 6s ease-in-out infinite;pointer-events:none}
/* shared inner-product polish */
.gr-top,body.practice-page>header{box-shadow:0 8px 30px rgba(5,27,46,.18)}.center-card,.offer-maker,.room-columns>section,.presence-live-grid>section,.saved-section,.history-section,.rules-card,.card,.toolbar,.list-panel,.board-panel,.help-panel{border:1px solid var(--cp-line)!important;box-shadow:var(--cp-shadow2)!important}.center-card,.offer-maker,.room-columns>section,.presence-live-grid>section,.saved-section,.history-section,.rules-card{border-radius:20px!important}.offer,.livegame,.savedgame,.history-row,.game-item{transition:.2s ease}.offer:hover,.livegame:hover,.savedgame:hover,.history-row:hover,.game-item:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(8,31,53,.08)}.primary{background:linear-gradient(135deg,#1267b2,#278cf1)!important;box-shadow:0 8px 20px rgba(39,140,241,.22)}
/* Beginner: preserve playful identity but make it premium */
.kid-topbar{box-shadow:0 9px 30px rgba(29,56,81,.09)!important}.hero-kid{box-shadow:0 28px 80px rgba(38,83,119,.12)!important}.kid-topbar nav a{transition:.2s ease}.kid-topbar nav a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(40,80,110,.09)}
@keyframes cpFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,28px,0) scale(1.08)}}@keyframes cpShine{0%,65%{left:-35%;opacity:0}72%{opacity:1}88%,100%{left:125%;opacity:0}}
@media(max-width:1100px){.topbar{height:auto!important;min-height:72px;flex-wrap:wrap;padding-block:8px!important}.topbar .navlinks{order:3;width:100%;overflow-x:auto;padding:2px 0}.cp-trust-strip{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr!important}.hero-card{justify-self:stretch!important;min-width:0!important}}
@media(max-width:760px){.hero{min-height:0;margin:10px 2px 18px!important;padding:38px 20px!important;border-radius:23px}.hero h1{font-size:clamp(36px,12vw,56px)!important;letter-spacing:-1.8px!important}.hero-card{display:block!important}.cp-trust-strip{grid-template-columns:1fr;margin:0 7px 18px}.topbar .navlinks{display:flex!important}.topbar .brand small{display:none}.topbar .language-picker{margin-left:auto!important}.level-gate{margin:0 2px 12px!important}.info-section{margin-inline:2px!important;padding:32px 20px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.cp-reveal{opacity:1;transform:none}}
/* Feature hub V2 */
.feature-hub{max-width:1220px;margin:28px auto;padding:28px}.feature-hub-head{text-align:center;max-width:820px;margin:0 auto 20px}.feature-hub-head h2{margin:.4rem 0}.feature-hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-link-card{display:flex;min-height:180px;flex-direction:column;gap:10px;padding:20px;border-radius:18px;text-decoration:none;color:inherit;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.12);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.feature-link-card:hover{transform:translateY(-5px);border-color:rgba(241,194,50,.55);box-shadow:0 18px 42px rgba(0,0,0,.2)}.feature-link-card b{font-size:1.05rem}.feature-link-card span{opacity:.78;line-height:1.5}.feature-link-card strong{margin-top:auto}@media(max-width:1000px){.feature-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.feature-hub{padding:18px}.feature-hub-grid{grid-template-columns:1fr}.feature-link-card{min-height:auto}}