/* Emerald studio — shared visual system, loaded after the game and PWA rules. */
:root{--bg:#101413;--bg2:#171c1a;--panel:#191f1c;--panel2:#202722;--line:#2c3530;--line2:#405248;--text:#f0f3ed;--muted:#9aa99f;--gold:#b4e88a;--gold2:#79b85e;--cyan:#a8dcca;--green:#a6e585;--shadow:0 12px 36px #00000012;--radius:20px;--sidebar:234px;--topbar:82px;--surface:#202722;--accent-soft:#b4e88a12}
body{background:var(--bg);font-family:'Segoe UI',system-ui,sans-serif;letter-spacing:.005em}
body.light{--bg:#f0f3ed;--bg2:#fff;--panel:#fff;--panel2:#f6f8f3;--line:#dce3d7;--line2:#b3c1aa;--text:#23332a;--muted:#667661;--surface:#f2f5ee;--gold:#476e2d;--accent-soft:#6c994014;background:var(--bg)}
.aurora,.noise{display:none}.panel,body.light .panel{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow);backdrop-filter:none}
.sidebar,body.light .sidebar{background:var(--bg);padding:27px 18px 18px;overflow-y:auto}.brand{grid-template-columns:35px 1fr;gap:10px;padding:0 0 26px;margin-bottom:17px;border-color:var(--line)}.brand img{width:35px;height:35px}.brand b{font-size:13px;letter-spacing:.06em}.brand small{font-size:7px;color:var(--muted);letter-spacing:.17em}.nav-label{font-size:9px;color:var(--muted);padding:18px 13px 9px;letter-spacing:.16em}.nav-stack{gap:5px}.nav-stack .nav-link{padding:12px 10px;border-radius:9px;position:relative}.nav-stack .nav-link span{font-size:12px;font-weight:500}.nav-stack .nav-link i{font-size:19px;color:var(--muted)}.nav-stack .nav-link.active,body.light .nav-stack .nav-link.active{background:var(--accent-soft);color:var(--gold)}.nav-stack .nav-link.active:before{content:'';position:absolute;left:-18px;width:3px;height:21px;border-radius:0 3px 3px 0;background:var(--gold)}.nav-stack .nav-link:hover,body.light .nav-stack .nav-link:hover{background:var(--surface);color:var(--text)}.count{background:var(--surface);color:var(--muted)}.pulse-badge{background:transparent;color:var(--gold);font-size:8px}.sidebar-foot{margin-top:30px;padding-top:18px}.profile-chip{background:var(--panel);border-radius:12px}.profile-chip img{border-radius:50%}.side-utilities{justify-content:space-between}.icon-btn{background:var(--surface);border-color:var(--line);color:var(--muted)}
.main{min-width:0}.topbar,body.light .topbar{background:var(--bg);padding:0 32px;gap:20px;box-shadow:none;grid-template-columns:auto minmax(160px,1fr) auto}.page-title{min-width:110px}.page-title>.network-dot{display:none}.page-title small{font-size:8px;color:var(--muted)}.page-title strong{font-size:16px;font-weight:600}.topbar-search{max-width:340px;border-radius:9px;background:var(--panel);border-color:var(--line);height:39px}.topbar-search input{font-size:11px}.topbar-search input::placeholder{color:var(--muted)}.topbar-search kbd{border-color:var(--line);color:var(--muted)}.top-actions{gap:10px}.region-pill,.credit-pill,.notification-btn,.avatar-btn{background:var(--panel);border-color:var(--line)}.region-pill{border:0;background:transparent}.credit-pill{border-radius:10px}.credit-pill>i{background:#b4e88a}.avatar-btn,.avatar-btn img{border-radius:50%}.notification-btn{border:0;background:transparent}.notification-btn span{background:#b4e88a;color:#18251a;border-color:var(--bg)}
.content{max-width:1760px;margin:auto;padding:30px 32px 40px}.lobby-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.lobby-heading .eyebrow{font-size:9px;font-weight:500;color:var(--muted)}.lobby-heading h2{font-size:27px;letter-spacing:-.04em;margin:6px 0 0;font-weight:600}.lobby-heading h2>span{color:var(--gold)}.lobby-status{display:flex;align-items:center;gap:11px;font-size:10px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:10px 14px}.network-dot{background:var(--gold);box-shadow:0 0 0 4px var(--accent-soft);width:6px;height:6px}.eyebrow{color:var(--muted);font-size:9px;letter-spacing:.14em}
.hero,body.light .hero{background:radial-gradient(ellipse at 85% 70%,#344b352b,transparent 65%),var(--panel);min-height:405px;grid-template-columns:1.06fr 1fr;border-radius:22px;isolation:isolate}.hero:after{display:none}.hero-copy{padding:40px 0 33px 36px}.hero-label{font-size:8px;color:var(--gold);letter-spacing:.12em}.hero-label span{width:6px;height:6px;border-radius:50%}.hero h1{font-size:clamp(38px,4.4vw,67px);line-height:1.07;letter-spacing:-.055em;font-weight:550;margin:24px 0 18px}.hero h1 em{background:none;color:var(--gold);font-style:italic;font-family:Georgia,serif;font-weight:400}.hero p,body.light .hero p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.hero-actions{margin-top:24px;gap:12px}.btn{border-radius:8px;padding:11px 17px;font-size:11px;font-weight:600;transition:background .18s,transform .18s,border-color .18s}.btn.primary{background:#b4e88a;border-color:#b4e88a;color:#1c3015;box-shadow:none}.btn.primary:hover{background:#c8f0aa;border-color:#c8f0aa}.btn.secondary,.btn.subtle,body.light .btn.secondary{background:var(--surface);border-color:var(--line);color:var(--text)}.btn.secondary:hover{border-color:var(--line2)}.btn.lg{padding:13px 21px;font-size:12px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.hero-proof{margin-top:28px;gap:24px;border-top:1px solid var(--line);padding-top:19px;max-width:340px}.hero-proof div{padding:0;border:0;min-width:0}.hero-proof b{font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.hero-proof small{font-size:8px;color:var(--muted);margin-top:5px}
.hero-art{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;perspective:950px;overflow:visible;min-height:380px}.table-halo{position:absolute;width:90%;aspect-ratio:1;border:1px solid #a9df8520;border-radius:50%;background:radial-gradient(circle,#8fa97813,transparent 70%)}.table-halo:after{content:'';position:absolute;inset:23px;border:1px solid #a9df8510;border-radius:50%}.showcase-board{position:relative;width:88%;max-width:420px;aspect-ratio:1.22;background:linear-gradient(140deg,#65836b,#253c30 50%,#516c55);border:9px solid #354b3b;border-radius:12px;box-shadow:0 12px 0 #1d2c22,0 14px 0 #567055,12px 30px 30px #0007,inset 0 0 0 2px #799376;transform:rotateX(28deg) rotateZ(-13deg);padding:15px}.showcase-field{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr 1fr;height:100%;background:#233b30;border:1px solid #a5be8260;border-radius:3px;overflow:hidden;gap:0 2px;padding:0 5px}.showcase-point{position:relative;display:flex;align-items:center;flex-direction:column;padding-top:4px;gap:1px}.showcase-point:before{content:'';position:absolute;inset:0 0 8%;background:#8ca377;clip-path:polygon(0 0,100% 0,50% 100%);opacity:.9}.showcase-point:nth-child(even):before{background:#17291f}.showcase-point.bottom{transform:rotate(180deg)}.showcase-checker{position:relative;z-index:1;width:94%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 28%,#fcf5de,#d8d3b9 65%,#888771);box-shadow:0 3px 0 #a1a08c,0 5px 5px #0009,inset 0 0 0 3px #ffffef55;flex-shrink:0}.showcase-checker.dark{background:radial-gradient(circle at 40% 28%,#51574e,#222b25 65%,#101a14);box-shadow:0 3px 0 #101810,0 5px 5px #0008,inset 0 0 0 3px #ffffff0c}.showcase-bar{position:absolute;width:4%;top:15px;bottom:15px;left:48%;background:linear-gradient(90deg,#29432f,#57724f,#304931);box-shadow:2px 0 4px #0005}.showcase-die{position:absolute;top:45%;font-size:46px;line-height:.8;color:#f2eedc;text-shadow:1px 3px 0 #aaa48c,3px 6px 6px #0008}.die-one{left:61%;transform:rotate(18deg)}.die-two{left:76%;top:51%;transform:rotate(-12deg)}.board-signature{position:absolute;bottom:3px;left:0;width:100%;text-align:center;font-size:5px;color:#c5d2b2}.art-caption{position:absolute;bottom:25px;left:0;right:0;text-align:center}.art-caption span{font-size:8px;letter-spacing:.23em;color:var(--gold)}.art-caption small{display:block;margin-top:5px;font-size:9px;color:var(--muted)}
.dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.dashboard-grid>.panel{padding:22px;border-radius:16px}.dashboard-grid>.quick-panel{grid-column:1/4;background:transparent;border:0;box-shadow:none;padding:3px 0 0}.card-head{margin-bottom:18px;gap:12px}.card-head h2{font-size:18px;letter-spacing:-.025em;font-weight:600;margin-top:5px}.card-head h3{font-size:16px;letter-spacing:-.02em;font-weight:600}.link-btn{color:var(--gold);font-size:10px}.mode-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.game-mode,body.light .game-mode{background:var(--panel);border:1px solid var(--line);border-radius:13px;grid-template-columns:38px 1fr;padding:19px 14px;gap:12px;min-width:0;transition:border-color .18s,transform .18s}.game-mode:hover{transform:translateY(-3px);border-color:var(--line2)}.game-mode.active{border-color:#91bb714d;background:linear-gradient(130deg,#a4d47f10,transparent),var(--panel)}.mode-orb{width:38px;height:38px;border-radius:11px;background:var(--surface);border:1px solid var(--line);color:var(--gold);font-size:21px}.game-mode:nth-child(2) .mode-orb{color:#dec58e}.game-mode:nth-child(3) .mode-orb{color:#b9b0e2}.game-mode:nth-child(4) .mode-orb{color:#97bdcd}.game-mode small{font-size:7px;letter-spacing:.12em;color:var(--muted)}.game-mode b{font-size:15px;color:var(--text);margin-top:2px}.game-mode p{font-size:9px;color:var(--muted);margin-top:3px}.game-mode em{grid-column:2;font-size:8px;justify-self:start;margin-top:-5px;color:var(--gold)}.season-card{grid-column:3;grid-row:2}.daily-card{grid-column:3;grid-row:3}.live-table{grid-column:1/3;grid-row:2}.event-card{grid-column:1/3;grid-row:3}.season-score b{font-size:33px;color:var(--text);font-weight:500}.season-score em{color:var(--gold)}.tier-medal{background:#ceb97b15;color:#d6c491;border-color:#d6c49144}.rank-progress,.mission-progress>span{background:var(--surface)}.rank-progress i,.mission-progress i{background:var(--gold)}.season-reward{border-color:var(--line);background:var(--surface)}.table-row{padding:17px 0;border-color:var(--line);gap:12px}.table-row b{font-size:11px;color:var(--text)}.table-row small{font-size:9px;color:var(--muted)}.table-row b span{color:var(--muted)}.players-stack img{border-color:var(--panel)}.filter-chips{gap:3px;flex-wrap:wrap}.filter-chips button{font-size:9px;color:var(--muted);padding:6px 9px}.filter-chips button.active{background:var(--surface);color:var(--gold);border-color:var(--line)}.event-card{background:radial-gradient(ellipse at 95% 10%,#bdce7220,transparent 65%),var(--panel)!important}.event-glow{display:none}.event-card .card-head>img{width:52px;height:52px}.event-card p,.daily-card p{color:var(--muted);font-size:11px;line-height:1.8}.event-meta{justify-content:flex-start;gap:40px}.event-card>.btn{width:auto;min-width:190px}.xp-chip{background:var(--accent-soft);color:var(--gold);border-color:var(--line)}
.page-intro{margin-bottom:27px}.page-intro h1{font-weight:550;letter-spacing:-.04em;font-size:35px}.page-intro p{color:var(--muted);font-size:12px;line-height:1.8}.screen:not(#screen-home)>.panel,.play-grid>.panel,.analysis-grid>.panel,.fair-grid>.panel,.learn-grid>.panel,.community-grid>.panel{border-radius:16px}.form-grid select,.auth-form input,.seed-input,.chat-input input{background:var(--surface);color:var(--text);border-color:var(--line);border-radius:8px}.mode-tabs{border-color:var(--line)}.mode-tabs button{color:var(--muted);font-size:12px;padding:14px 20px}.mode-tabs button.active{color:var(--gold);border-color:var(--gold);background:var(--accent-soft)}.quick-match-box,.switch-line,.match-preview,.friend-card,.answer-grid button,.toolbar-actions button,.match-actions button{background:var(--surface);border-color:var(--line);color:var(--text)}.match-side,.board-stage{background:var(--panel)}.modal,body.light .modal{background:var(--panel);border-color:var(--line);border-radius:20px}.modal h2{letter-spacing:-.035em;font-weight:600}.modal-close{color:var(--muted);background:var(--surface)}.toast{background:var(--panel);color:var(--text);border-color:var(--line2);font-size:12px}.legal-note{color:var(--muted);font-size:10px;line-height:1.7}.profile-stats b,.vault-stats b{font-size:30px;font-weight:550}.profile-stats small,.vault-stats small{font-size:9px;color:var(--muted)}.profile-stats span,.vault-stats span{font-size:10px;color:var(--muted)}
.skip-link{position:fixed;top:10px;left:15px;transform:translateY(-150%);z-index:200;background:#b4e88a;color:#182b16;padding:12px;border-radius:8px}.skip-link:focus{transform:none}:focus-visible{outline:2px solid var(--gold)!important;outline-offset:4px}button,a,input,select{touch-action:manipulation}.menu-toggle{display:none}.mobile-menu{padding:24px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;width:min(420px,calc(100% - 24px));max-height:85dvh;overflow:auto}.mobile-menu::backdrop{background:#0009;backdrop-filter:blur(6px)}.mobile-menu header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.mobile-menu h2{font-size:18px;margin:0}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-menu-grid button{padding:15px 10px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;text-align:left;font-size:12px}.mobile-menu-grid button[aria-current=page]{border-color:var(--gold);color:var(--gold)}.mobile-menu .menu-settings{display:flex;gap:8px;margin-top:18px}.menu-settings button{flex:1}.screen.active{animation:studio-enter .25s ease}@keyframes studio-enter{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.hero-copy{padding:46px}.hero-art{min-height:445px}.showcase-board{max-width:475px}.sidebar-foot{margin-top:auto}.hero h1{font-size:72px}}
@media(max-width:1220px){:root{--sidebar:205px}.topbar{padding:0 22px;grid-template-columns:1fr auto}.topbar-search{display:none}.content{padding:24px 22px}.hero-copy{padding-left:26px}.hero h1{font-size:45px}.hero-art{min-height:390px}.mode-row{grid-template-columns:repeat(2,minmax(0,1fr))}.game-mode{grid-template-columns:38px 1fr auto}.game-mode em{grid-column:3;grid-row:1;align-self:center}.dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-head{flex-wrap:wrap}.hero-proof{gap:18px}.hero-proof b{font-size:16px}.table-metric:nth-of-type(4){display:none}.table-row{grid-template-columns:50px 1fr 45px 55px}.table-metric:nth-of-type(3){display:none}}
@media(max-width:1000px) and (min-width:861px){.hero h1{font-size:38px}.hero-actions{flex-wrap:wrap}.hero-copy{padding:28px 0 28px 24px}.hero-proof{gap:12px}.hero p{font-size:11px}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid>.quick-panel{grid-column:1/3}.season-card,.daily-card{grid-column:auto;grid-row:auto}.live-table,.event-card{grid-column:1/3;grid-row:auto}.top-actions{gap:6px}.region-pill{display:none}}
@media(max-width:860px){:root{--sidebar:0px}.topbar{height:70px;padding:0 16px;gap:8px}.page-title{gap:10px;min-width:0}.page-title strong{font-size:14px}.menu-toggle{display:grid;place-items:center;width:34px;height:36px}.top-actions{gap:7px}.content{padding:23px 16px 100px}.lobby-heading{margin-bottom:20px}.lobby-heading h2{font-size:24px}.lobby-heading .eyebrow{font-size:8px}.lobby-status{font-size:9px;padding:9px}.hero{grid-template-columns:1fr 1fr;min-height:355px}.hero-copy{padding:30px 0 28px 25px}.hero h1{font-size:42px}.hero p{font-size:11px}.hero-actions{gap:8px}.hero-actions .btn{font-size:11px;padding:11px 15px}.hero-art{height:auto;min-height:355px}.hero-proof{gap:16px}.hero-proof b{font-size:16px}.hero-proof small{font-size:7px}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dashboard-grid>.quick-panel{grid-column:1/3}.season-card,.daily-card{grid-column:auto;grid-row:auto}.live-table,.event-card{grid-column:1/3;grid-row:auto}.mobile-nav,body.light .mobile-nav{background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 30px #0004;left:16px;right:16px;bottom:max(10px,env(safe-area-inset-bottom));height:65px;border-radius:17px}.mobile-nav button{font-size:20px;color:var(--muted);gap:2px}.mobile-nav button small{font-size:9px}.mobile-nav button.active{background:var(--accent-soft);color:var(--gold)}.watch-btn{display:block}.table-row{grid-template-columns:50px 1fr 45px 55px}.game-mode{min-height:108px}.card-head h2{font-size:17px}.screen:not(#screen-home) .card-head{gap:12px}.page-intro h1{font-size:30px}}
@media(max-width:580px){.lobby-status{display:none}.top-actions .credit-pill{height:35px;padding:3px 5px;gap:4px}.credit-pill>img{width:23px;height:23px}.credit-pill>span{min-width:35px}.credit-pill small,.credit-pill>i{display:none}.top-actions .avatar-btn{display:none}.top-actions .btn.tiny{font-size:10px;padding:9px}.hero{grid-template-columns:1fr}.hero-copy{padding:29px 25px 0}.hero h1{font-size:48px;margin:20px 0 16px}.hero p{font-size:12px}.hero-actions .btn{padding:13px 20px;font-size:12px}.hero-proof{max-width:none;justify-content:space-between;margin-top:24px}.hero-proof small{font-size:9px}.hero-proof b{font-size:19px}.hero-art{height:305px;min-height:305px;padding:0 30px 30px}.showcase-board{width:83%;max-width:295px;border-width:7px;padding:12px}.showcase-bar{top:12px;bottom:12px}.showcase-die{font-size:35px}.table-halo{width:70%}.art-caption{bottom:15px}.art-caption small{font-size:8px}.dashboard-grid>.panel{padding:18px}.dashboard-grid>.quick-panel{padding:7px 0 0}.mode-row{gap:9px}.game-mode,body.light .game-mode{padding:15px 12px;gap:8px;grid-template-columns:30px 1fr;min-height:112px}.mode-orb{width:30px;height:34px;font-size:18px}.game-mode b{font-size:14px}.game-mode p{font-size:8px}.game-mode em{grid-column:2;grid-row:auto}.season-card,.daily-card{grid-column:1/3}.table-row{grid-template-columns:39px 1fr 53px;gap:8px}.table-row .table-metric{display:none}.table-row b{font-size:10px}.table-row small{font-size:8px}.table-row .players-stack img{width:28px;height:28px}.table-row .btn{padding:8px;font-size:9px}.filter-chips button{padding:6px 8px}.event-meta{gap:30px}.page-intro{gap:15px}.modal{max-width:calc(100vw - 24px)}.showcase-checker{box-shadow:0 2px 0 #a1a08c,0 3px 4px #0009,inset 0 0 0 2px #ffffef55}}
/* Keep dense secondary screens legible and consistent in both themes. */
.coach-tags span,.tag-row span,.lesson-icon,.decision-row>span,.vault-filters button.active,.profile-badges span,.badge-grid>div{background:var(--surface);border-color:var(--line);color:var(--muted)}
.training-card small,.lesson-foot b,.metric-card>small,.metric-card span,.scorecard p,.decision-row small,.blunder-item small,.blunder-item p,.quiz-content p,.coach-hero p{color:var(--muted);font-size:10px;line-height:1.65}
.decision-row b,.answer-grid button,.lesson-foot .btn{font-size:11px}.decision-row,.lesson-foot,.profile-match{border-color:var(--line)}.decision-row{color:var(--text)}.training-card h3,.blunder-item h3{font-size:16px}.coach-hero h2{font-weight:600;letter-spacing:-.03em}.badge-grid>div.locked{opacity:.45}
.sidebar{scrollbar-width:thin;scrollbar-color:var(--line) transparent}body{scrollbar-color:var(--line2) var(--bg)}
@media(min-width:861px){.showcase-board{width:79%}.hero-art{padding-bottom:25px}.art-caption{bottom:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}