/* Clearer surfaces and stronger type, with sage reserved for the main action. */
:root{--bg:#11171b;--surface:#222d33;--surface2:#2c3940;--line:#48585e;--text:#f3f4ed;--muted:#b5c0bd;--accent:#c6e3a5}
body{background:radial-gradient(ellipse at 50% 25%,#233037 0%,#11171b 72%)}
.header{background:#0d1317f5;border-bottom-color:#435058}.main-nav button{color:#bdc9c6}.main-nav button:hover,.main-nav button[aria-current="page"]{background:#c6e3a512;color:#effadb}.main-nav button[aria-current="page"]:after{height:3px}.brand{color:#f8faf2}.sign-in{color:#ebf7db;background:#25332b;border-color:#789565}.header .icon-button{color:#b5c0bd}
.kicker{color:#c3d3b5}.muted,.home-copy p,.lobby-intro,.lobby-note{color:#bfcac8}.home-title{color:#f9faf3}.home-title em{color:#c6e3a5}.home-art{filter:drop-shadow(0 8px 18px #0008)}
.lobby-main{background:#253139;border-color:#586a71;box-shadow:0 16px 45px #0003}.lobby-heading h2{color:#fff}.casual-tag{color:#dce7dc;background:#162027;border-color:#52666c}.quick-pools button{background:#152128;border-color:#53666e;color:#f5f6ee;box-shadow:0 2px 4px #0002}.quick-pools strong{font-weight:550}.quick-pools strong span{color:#bdc9bd}.quick-pools small{color:#c0ceca}.quick-pools button:hover{background:#344b42;border-color:#b8d995}.quick-pools .searching{background:#3a5643;border-color:#d2edb1;box-shadow:inset 0 0 0 1px #d2edb1}.lobby-foot{color:#c4d2c9}.lobby-aside .play-card{background:#1c272d;border-color:#526268}.lobby-aside .play-card:hover{background:#2b3b40;border-color:#a6be9a}.lobby-aside .play-card strong{color:#f7f9f1}.lobby-aside .play-card small{color:#becac6}.lobby-aside .play-icon{color:#d6e9bd}.lobby-aside .card-arrow{color:#d5e0d0}.home-return{border-color:#54635e}.resume-button{color:#d7e7c8}.resume-button small{color:#bdc8be}
.queue-status{background:#15291f;border-color:#7e9c65}.queue-status strong{color:#f1f8e6}.queue-status p{color:#d0dec6}.primary{background:#c6e3a5;color:#142019;border-color:#d5efb7;font-weight:650}.primary:hover:not(:disabled){background:#def3c4;color:#101b12}.secondary{background:#26343b;color:#edf3e6;border-color:#617474}.secondary:hover:not(:disabled){background:#35474b;color:#fff;border-color:#a9c397}.text-button{color:#c7d2c8}
.panel,dialog{background:#202c31;border-color:#596a6b}.game-status{background:#2b3e35}.clock{background:#253137;color:#cbd7d3}.clock.active{background:#38533e;color:#f3fce8}.avatar{background:#24323a;border-color:#5a6c6e}.status-dot,.online-dot{background:#c6e3a5}.watch-card{background:#23333b;border-color:#5e7278;color:#f0f5e9}.form-error{color:#ffc0ac!important}

.learning-catalog{max-width:1200px;margin:6px auto 40px}.learning-heading{display:flex;align-items:center;justify-content:space-between;gap:32px}.learning-heading h1{font-size:44px;font-weight:550;letter-spacing:-1.5px;margin:14px 0}.learning-heading p{max-width:660px;font-size:14px;line-height:1.8;color:#c1cdc9;margin:0}.learning-heading>.secondary{white-space:nowrap;padding:12px 18px;width:auto}.learning-summary{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#bfcebf;padding:20px 0;border-bottom:1px solid #4d5d62;margin-bottom:25px}.learning-summary>span:last-child{color:#d9e9c2}.learning-groups>section{margin:28px 0 36px}.learning-groups h2{font-size:20px;font-weight:550;color:#f5f7ee;letter-spacing:-.3px;margin-bottom:17px}.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lesson-card{--tone:#ecc48a;position:relative;text-align:left;display:flex;align-items:center;gap:16px;padding:19px;background:#202d35;border:1px solid #52656d;border-top:3px solid var(--tone);border-radius:10px;min-height:174px;box-shadow:0 5px 16px #0002;transition:background .15s,border-color .15s}.lesson-card:hover{background:#2d3f46;border-color:var(--tone)}.tone-blue{--tone:#93cce1}.tone-coral{--tone:#efac94}.tone-violet{--tone:#c5b1e4}.lesson-card-copy{display:block;flex:1;min-width:0}.lesson-level{font-size:9px;letter-spacing:1px;text-transform:uppercase;display:block;color:var(--tone);margin-bottom:8px;font-weight:650}.lesson-card strong{font-size:17px;line-height:1.3;font-weight:650;display:block;color:#f9faf2}.lesson-description{font-size:11px;line-height:1.7;color:#c4d0cc;display:block;margin:8px 0 13px}.lesson-card-foot{font-size:10px;line-height:1.5;color:#e0eacb;display:block}.lesson-meter{display:block;height:3px;background:#46565c;border-radius:4px;margin-top:9px;overflow:hidden}.lesson-meter i{height:100%;background:var(--tone);display:block}.lesson-preview{width:82px;height:82px;flex:none;display:grid;grid-template-columns:repeat(8,1fr);border:3px solid #0d1419;border-radius:3px;overflow:hidden;box-shadow:0 2px 12px #0005;opacity:.95}.lesson-preview i{display:grid;place-items:center;background:#e5d4b8;aspect-ratio:1}.lesson-preview i:nth-child(16n+2),.lesson-preview i:nth-child(16n+4),.lesson-preview i:nth-child(16n+6),.lesson-preview i:nth-child(16n+8),.lesson-preview i:nth-child(16n+9),.lesson-preview i:nth-child(16n+11),.lesson-preview i:nth-child(16n+13),.lesson-preview i:nth-child(16n+15){background:#8a9d8e}.lesson-preview svg{width:96%;height:96%}
.puzzle-start{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:25px 28px;background:linear-gradient(110deg,#314c40,#26343c);border:1px solid #7b9474;border-left:4px solid #c6e3a5;border-radius:10px;margin:25px 0 35px}.puzzle-start h2{font-size:25px;font-weight:550;margin:9px 0}.puzzle-start p{font-size:12px;color:#d1ddd0;line-height:1.7;margin-bottom:0}.puzzle-start .primary{width:auto;white-space:nowrap;padding:14px 20px}.learning-notice{padding:17px 20px;background:#2a4433;color:#e7f8d5;border:1px solid #82a366;border-radius:7px;font-size:13px;line-height:1.8}
.training-screen{padding:22px 24px}.training-workspace{width:max-content;max-width:100%;margin:auto}.training-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 19px}.training-topbar .text-button{font-size:12px;color:#d4e8be;padding:5px 0}.training-topbar>span{font-size:11px;color:#c4d1cc}.training-layout{grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:center}.training-board-column{width:min(740px,calc(100dvh - 215px),calc(100vw - 430px))}.training-board-heading{margin-bottom:11px}.training-board-heading strong{color:#ebf5df}.training-board-column>#training-progress{font-size:11px;color:#c5d3c5;margin:13px 0 0;line-height:1.5}.training-panel{width:330px;max-height:calc(100dvh - 155px);overflow-y:auto;scrollbar-width:thin;padding:23px;background:#223038;border-color:#586c73;box-shadow:0 12px 35px #0003}.training-panel h1{font-size:26px;line-height:1.2;font-weight:600;margin:12px 0}.training-panel #training-concept{font-size:12px;color:#cfdbd5;line-height:1.8;margin:0 0 20px}.training-step{font-size:10px;color:#d6e5c6;margin:18px 0}.training-step>div{height:4px;background:#4c6064;border-radius:4px;margin-top:9px;overflow:hidden}.training-step i{display:block;height:100%;width:var(--progress,0%);background:#c6e3a5}.training-status{display:flex;align-items:flex-start;gap:12px;background:#152129;border:1px solid #4d666c;border-left:3px solid #a8c9e5;border-radius:6px;padding:15px;margin:16px 0}.training-status>span{font-size:24px;line-height:24px;color:#bdd8ed;min-width:19px}.training-status strong{font-size:16px;font-weight:650;color:#f8faf1;line-height:1.4}.training-panel .training-status p{font-size:12px;color:#d1ded8;line-height:1.7;margin:5px 0 0}.training-status[data-state="good"]{background:#203c2d;border-color:#789a62;border-left-color:#c6e3a5}.training-status[data-state="good"]>span{color:#d2edb2}.training-status[data-state="fail"]{background:#3d2c2b;border-color:#ad7464;border-left-color:#f0b39e}.training-status[data-state="fail"]>span{color:#ffc7b1}.training-status[data-state="solution"]{border-left-color:#d9c297}.training-panel .training-hint-note{padding:12px;border:1px solid #739fb2;border-radius:5px;background:#1d343f;color:#dcedf3;font-size:12px}.square.hint-square{outline:5px solid #257aa7;outline-offset:-5px}.training-explanation-box{border-left:2px solid #b2d88a;padding:0 0 0 13px;margin:18px 0}.training-panel .training-explanation-box p{font-size:12px;color:#e1ebd7;line-height:1.8;margin-bottom:0}.training-actions{margin:17px 0 8px;gap:9px}.training-actions button{font-size:11px}.training-actions .primary{min-height:40px}.training-actions .text-button{grid-column:1/-1;justify-self:center;font-size:11px;color:#c4d1c6;padding:9px}.training-menu{margin-top:15px;gap:5px}.training-menu:empty{display:none}.training-menu button{padding:10px;font-size:11px;color:#c6d4cb;border-radius:5px;line-height:1.5}.training-menu button[aria-current="step"]{background:#3c5140;color:#effade;box-shadow:inset 3px 0 #c6e3a5}.training-moves{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}.training-moves:empty{display:none}.training-moves button{padding:6px 9px;font-size:12px;background:#152229;border:1px solid #53686d;color:#e8f0e1;border-radius:4px;font-variant-numeric:tabular-nums}.training-moves button:disabled{opacity:1;cursor:default}.training-moves button.current{background:#3a5340;color:#effbdd;border-color:#b8d297}.training-review{display:flex;align-items:center;gap:7px;font-size:10px;color:#c9d5ca}.training-review span{margin-right:auto}.training-review button{font-size:23px;border:1px solid #697b77;border-radius:4px;width:33px;height:30px;background:#293a3f}
@media(min-width:1800px) and (min-height:900px){.learning-catalog{max-width:1480px;margin-top:10px}.learning-heading h1{font-size:62px}.learning-heading p{font-size:18px;max-width:850px}.learning-heading>.secondary{font-size:15px;padding:16px 24px}.learning-summary{font-size:14px;padding:26px 0}.learning-groups h2{font-size:28px}.lesson-grid{gap:20px}.lesson-card{min-height:220px;padding:25px;gap:24px}.lesson-preview{width:106px;height:106px}.lesson-card strong{font-size:24px}.lesson-level{font-size:11px}.lesson-description{font-size:14px}.lesson-card-foot{font-size:12px}.puzzle-start{padding:34px 38px}.puzzle-start h2{font-size:34px}.puzzle-start p{font-size:16px}.puzzle-start .primary{font-size:16px;padding:18px 26px}.training-screen{padding:35px 40px}.training-layout{grid-template-columns:minmax(0,1fr) 380px;gap:40px}.training-board-column{width:min(1000px,calc(100dvh - 240px),calc(100vw - 620px))}.training-panel{width:380px;padding:30px;max-height:calc(100dvh - 200px)}.training-panel h1{font-size:32px}.training-panel #training-concept,.training-panel .training-status p,.training-panel .training-explanation-box p,.training-panel .training-hint-note{font-size:15px}.training-status strong{font-size:20px}.training-step,.training-topbar>span,.training-board-column>#training-progress{font-size:13px}.training-actions button,.training-menu button{font-size:13px}.training-topbar .text-button{font-size:15px}.training-moves button{font-size:15px}}
@media(max-width:1100px){.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-heading h1{font-size:38px}.lesson-card{min-height:180px}.training-layout{grid-template-columns:minmax(0,1fr) 300px;gap:22px}.training-panel{width:300px;padding:19px}.training-board-column{width:min(650px,calc(100dvh - 215px),calc(100vw - 382px))}}
@media(max-width:700px){.training-screen{padding:25px 18px}.learning-heading{display:block}.learning-heading h1{font-size:34px;line-height:1.15}.learning-heading p{font-size:13px}.learning-heading>.secondary{margin-top:20px;font-size:12px}.learning-summary{font-size:10px;line-height:1.6}.learning-summary>span:last-child{display:none}.lesson-grid{grid-template-columns:1fr;gap:12px}.lesson-card{min-height:164px;padding:19px;gap:18px}.lesson-preview{width:90px;height:90px}.lesson-card strong{font-size:19px}.lesson-description{font-size:12px}.lesson-card-foot{font-size:11px}.lesson-level{font-size:10px}.learning-groups h2{font-size:21px}.puzzle-start{display:block;padding:22px}.puzzle-start h2{font-size:24px}.puzzle-start .primary{margin-top:20px;width:100%}.training-workspace{width:100%}.training-topbar{gap:12px;margin-bottom:18px}.training-topbar>span{font-size:10px}.training-layout{display:flex;flex-direction:column;gap:23px}.training-board-column,.training-panel{width:100%;max-width:620px}.training-panel{max-height:none;padding:23px}.training-panel h1{font-size:26px}.training-panel #training-concept{font-size:13px}.training-status strong{font-size:17px}.training-panel .training-status p,.training-panel .training-explanation-box p{font-size:13px}.training-menu{display:flex;flex-direction:column}.training-menu button{font-size:12px}.training-actions button{font-size:12px}}
@media(min-width:701px) and (max-height:600px){.training-screen{padding:14px 22px}.training-board-column{width:min(calc(100dvh - 170px),calc(100vw - 390px))}.training-panel{max-height:calc(100dvh - 115px)}.training-topbar{margin-bottom:10px}.learning-heading h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){.lesson-card{transition:none}}
.training-mobile-goal{display:none}@media(max-width:700px){.training-mobile-goal{display:block;font-size:12px;line-height:1.65;color:#eff5e9;background:#1a2a32;border:1px solid #607d87;border-left:3px solid #acd1ec;border-radius:5px;padding:10px 13px;margin:0 0 12px}.training-mobile-goal[data-state="fail"]{background:#3d2c2b;border-color:#dc9b88}.training-mobile-goal[data-state="good"]{background:#294432;border-color:#b8d297}}
/* A clear circular center with softly shaded corners, matching the capture reference. */
.square.capture .legal{width:100%;height:100%;border:0;border-radius:0;background:radial-gradient(circle,transparent 79%,rgba(20,85,30,.3) 80%);box-shadow:none}