.header{gap:24px}.header nav{display:flex;gap:20px;align-items:center}.nav-button.current{color:var(--amber)}.account-button{border:1px solid #596044;background:#273024;color:var(--text);border-radius:7px;padding:10px 13px;white-space:nowrap;font:inherit;font-size:12px}.welcome-account{font-size:10px;color:#9cab89;margin-top:20px!important}.header-right{gap:12px}.canvas-wrap.playing{overflow:auto;display:block}.canvas-wrap.playing canvas{display:block;max-width:none}.zoom-controls{display:flex;align-items:center;gap:8px;margin-left:auto}.zoom-controls button{background:#2b3528;border:1px solid #536048;color:var(--text);width:30px;height:30px;border-radius:4px;font-size:18px}.zoom-controls span{font-size:10px;min-width:30px;text-align:center}.save-status{margin:0;padding:11px 16px;font-size:11px;color:var(--lime);background:#263120;border-top:1px solid #3c4a33}.round-summary{font-size:12px;line-height:1.6;padding:12px 15px;border:1px solid #4c5a3d;background:#273221;border-radius:8px;color:var(--lime)}.ranking{max-height:480px;overflow:auto;scrollbar-color:#576347 #1b211b}.lobby-bots{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid #455139;padding-top:12px;margin-top:16px;text-align:left}.lobby-bots label{font-size:10px}.lobby-bots input,.lobby-bots select{min-height:35px;padding:7px}.lobby-bots .compact{font-size:10px;min-height:35px;padding:7px}.lobby-bots button:last-child{grid-column:1/-1}.lobby-card{width:370px}.stage-overlay:has(.lobby-card:not([hidden])){position:relative;inset:auto;width:100%;min-height:600px;background:#111810ed}.results-card .button{margin-top:9px}.results-card .lobby-hint{margin-top:13px}.hub-view{padding-bottom:20px}.hub-heading,.profile-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:10px 0 30px}.hub-heading h1,.profile-heading h1{font-size:34px;letter-spacing:-1px;margin-bottom:12px}.hub-heading>div>p:last-child,.profile-heading p{color:#a3b094;font-size:13px;line-height:1.7}.hub-heading .eyebrow{font-size:10px}.hub-heading>.button{flex-shrink:0}.catalog-tools{display:flex;gap:18px;align-items:end;padding:20px;border:1px solid #394333;border-radius:10px;background:#1a211a;margin-bottom:25px}.catalog-tools label:first-child{flex:1}.catalog-tools>label:nth-child(2){min-width:190px}.catalog-tools>span{font-size:11px;color:#a3b18f;white-space:nowrap;padding-bottom:15px}label{display:block;font-size:12px;line-height:1.5;color:#bac6ab}label input:not([type=checkbox]),label select,label textarea{margin-top:7px;width:100%;display:block;background:#131b15;border:1px solid #4d5942;color:var(--text);padding:11px 12px;border-radius:6px;min-height:44px;font:inherit;font-size:13px}select{color-scheme:dark}textarea{resize:vertical}.check-label{display:flex;align-items:center;gap:9px;min-height:44px;font-size:12px}.check-label input{accent-color:var(--amber);width:17px;height:17px}.puzzle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.puzzle-card{border:1px solid #3c4735;background:#1a211a;border-radius:10px;overflow:hidden;transition:border-color .18s,transform .18s}.puzzle-card:hover{border-color:#8b9a6f;transform:translateY(-2px)}.puzzle-cover{position:relative;aspect-ratio:1.25;overflow:hidden;background:#263527}.puzzle-cover>img{width:100%;height:100%;object-fit:cover;display:block}.favorite-button{position:absolute;top:10px;right:10px;background:#111d18dd;border:1px solid #d6d9b978;color:#ffe0a6;width:39px;height:39px;border-radius:8px;font-size:24px;display:grid;place-items:center}.favorite-button[aria-pressed=true]{background:#7c542dec;color:#ffe3a7}.puzzle-card-info{padding:17px}.puzzle-category{font-size:9px;letter-spacing:1.3px;color:var(--amber);text-transform:uppercase}.puzzle-card h3{font-size:16px;font-weight:500;margin:9px 0;color:var(--text)}.puzzle-card p{font-size:11px;color:#a5b091;line-height:1.6;min-height:35px;margin:0 0 15px}.puzzle-card-actions{display:flex;gap:8px}.puzzle-card-actions .primary{flex:1}.button.compact{padding:8px 11px;font-size:11px;min-height:36px}.puzzle-card-actions .button{font-size:12px;min-height:40px;padding:9px}.section-heading{margin:32px 0 22px}.section-heading h2,.hub-view h2{font-size:21px;font-weight:500;letter-spacing:-.4px}.section-heading p{font-size:12px;color:#9eac8e;line-height:1.7;margin:10px 0}.empty-state{padding:25px;background:#182018;border:1px dashed #425039;border-radius:8px;color:#a3b492;font-size:13px;line-height:1.7;grid-column:1/-1}.personal-library{border-top:1px solid #364232;margin-top:40px}.profile-avatar,.person-avatar{display:grid;place-items:center;background:#705534;color:#f6deb5;font-weight:600;flex-shrink:0}.profile-avatar{width:92px;height:92px;border:1px solid #ad8753;border-radius:20px;font-size:32px}.profile-heading>div{flex:1}.profile-heading h1{margin:6px 0}.profile-heading .eyebrow{margin:0;font-size:11px;color:var(--amber)}[data-color=lime]{background:#4c6637;color:#e3f3cb}[data-color=blue]{background:#3c5e79;color:#d0eafa}[data-color=pink]{background:#824e64;color:#f5d5e0}[data-color=violet]{background:#635484;color:#e3dbfa}[data-color=teal]{background:#3c6c69;color:#c4eeea}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:28px}.profile-stat{padding:23px;background:#1c241a;border:1px solid #3c4934;border-radius:9px}.profile-stat strong{display:block;font-size:30px;color:var(--lime);font-weight:500;margin-bottom:8px}.profile-stat span{font-size:11px;color:#a8b499}.profile-tabs{display:flex;gap:10px;border-bottom:1px solid #415139;padding:0 0 12px;margin:0 0 28px}.profile-tabs button,.auth-switch button{background:transparent;color:#a9b497;border:1px solid transparent;border-radius:5px;padding:10px 14px;font-size:12px}.profile-tabs .current,.auth-switch .current{background:#303d27;border-color:#647d47;color:var(--lime)}.profile-tabs span:not(:empty){background:var(--amber);color:#242515;border-radius:10px;padding:2px 6px;margin-left:4px}.settings-columns,.friends-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.settings-columns form,.friends-columns>section{padding:25px;background:#1a231a;border:1px solid #394c30;border-radius:10px}.settings-columns label{margin-bottom:17px}.settings-columns h2{margin:0 0 22px}.form-message{font-size:12px;color:#efbc9c;line-height:1.65;margin-top:13px}.small-copy{font-size:11px;color:#acb99b;line-height:1.8;margin:15px 0}.history-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;background:#1b2419;border:1px solid #415238;border-radius:8px;padding:20px;margin-bottom:13px}.history-row h3{margin:0 0 8px;font-size:16px;font-weight:500}.history-row p{font-size:12px;color:#a7b697;margin:6px 0;line-height:1.6}.history-result{text-align:right}.history-result strong{display:block;color:var(--lime);font-size:18px;font-weight:500;margin-bottom:6px}.history-result span{font-size:11px;color:#a7b397}.history-row details{grid-column:1/-1;font-size:12px;color:#b7c7a4;border-top:1px solid #34462b;padding-top:13px}.history-row summary{cursor:pointer;min-height:24px}.person-row{display:flex;gap:11px;align-items:center;padding:16px 0;border-bottom:1px solid #3a4930;flex-wrap:wrap}.person-avatar{width:38px;height:38px;border-radius:8px;font-size:14px}.person-row>div:nth-child(2){flex:1;min-width:120px}.person-row strong{font-size:13px;font-weight:500;display:block}.person-row small{font-size:10px;color:#a7b397;display:block;margin-top:5px}.person-actions{display:flex;gap:6px;flex-wrap:wrap}.invite-row{border:1px solid #536849;border-radius:7px;background:#2c3925;padding:14px;margin:12px 0}.invite-row p{font-size:12px;color:#c5d2b3;line-height:1.6}dialog{max-height:90vh;overflow:auto}#setup-dialog,#auth-dialog,#import-dialog{max-width:560px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.time-estimate{border:1px solid #556c41;border-radius:7px;padding:13px;color:var(--lime);background:#273521;font-size:13px;line-height:1.6;margin:20px 0 13px}.auth-switch{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 18px}.auth-switch button{padding:9px;font-size:11px}#auth-form>label,#import-form>label{margin-bottom:17px}#recovery-panel p{font-size:13px;line-height:1.75;color:#bccba7}#recovery-code{display:block;overflow-wrap:anywhere;background:#10190f;border:1px solid #61774b;padding:17px;margin:20px 0;font-size:15px;color:var(--lime)}#recovery-panel button{margin:5px 6px 5px 0}#final-list{max-height:60vh}.hub-view .button:focus-visible,.hub-view button:focus-visible,.account-button:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(min-width:1100px){.sidebar{position:sticky;top:18px;align-self:start}.ranking{max-height:410px}.sidebar .image-preview{aspect-ratio:1.8}}
@media(max-width:1200px){.header nav{gap:13px}.header .connection{display:none}.puzzle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.account-button{font-size:11px}.catalog-tools{flex-wrap:wrap}.catalog-tools label:first-child{min-width:200px}.catalog-tools .check-label{min-width:140px}}
@media(max-width:760px){.header{height:auto;min-height:94px;padding:15px 4%;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}.header nav{order:3;width:100%;margin:0;justify-content:space-between;gap:9px}.header .header-right{margin-left:auto;gap:7px}.header .brand{font-size:20px}.header .nav-button{font-size:11px;padding:5px}.header .account-button{font-size:10px;max-width:155px;overflow:hidden;text-overflow:ellipsis;min-height:34px}.hub-heading,.profile-heading{flex-wrap:wrap;gap:14px;margin-bottom:22px}.hub-heading h1,.profile-heading h1{font-size:28px;max-width:none}.hub-heading .button{width:100%}.catalog-tools{display:grid;grid-template-columns:1fr 1fr;padding:15px;gap:12px}.catalog-tools label:first-child{grid-column:1/-1;min-width:0}.catalog-tools>label:nth-child(2){min-width:0}.catalog-tools>span{padding:0;grid-column:1/-1}.puzzle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.puzzle-card-info{padding:12px}.puzzle-card h3{font-size:13px}.puzzle-card p{font-size:10px;min-height:45px}.puzzle-card-actions{flex-direction:column;gap:6px}.puzzle-card-actions .button{font-size:11px}.favorite-button{width:34px;height:34px;font-size:23px}.profile-avatar{width:63px;height:63px;font-size:23px;border-radius:12px}.profile-heading>div{min-width:190px}.profile-heading>.button{width:100%}.profile-stats{grid-template-columns:1fr 1fr;gap:10px}.profile-stat{padding:15px}.profile-stat strong{font-size:26px}.profile-tabs{gap:4px;overflow-x:auto}.profile-tabs button{font-size:10px;padding:10px 8px;white-space:nowrap}.settings-columns,.friends-columns{grid-template-columns:1fr;gap:18px}.settings-columns form,.friends-columns>section{padding:18px}.history-row{padding:15px;gap:10px}.history-row h3{font-size:13px}.history-row p{font-size:10px}.history-result strong{font-size:14px}.history-result span{font-size:9px}.form-grid{gap:13px}.form-grid label{font-size:11px}.lobby-card{width:100%}.stage-overlay:has(.lobby-card:not([hidden])){min-height:650px}.lobby-card .lobby-hint{font-size:11px}.canvas-wrap.playing{overflow:auto}.canvas-wrap.playing canvas{min-width:0;max-width:none}.arena-footer{flex-wrap:wrap;gap:8px}.arena-footer>span{flex:1}.zoom-controls{gap:5px}.save-status{font-size:10px}.person-row{gap:9px}.person-actions{width:100%;padding-left:48px}.sidebar .ranking{max-height:350px}#results-card .button{font-size:12px}.welcome-account{font-size:9px}.welcome h2{font-size:26px}}
@media(max-width:380px){.puzzle-grid{gap:8px}.puzzle-card-info{padding:10px}.form-grid{grid-template-columns:1fr}.catalog-tools{grid-template-columns:1fr}.catalog-tools label{grid-column:1}.header .brand{font-size:18px}.header .account-button{max-width:130px}.zoom-controls span{display:none}.profile-tabs button{font-size:9px;padding:9px 5px}}
 .image-removal { margin-top:14px; font-size:12px; color:var(--muted); }
 .image-removal summary { cursor:pointer; padding:6px 0; }
 .image-removal .button { margin-top:8px; }

.canvas-wrap { display:block; min-width:0; }
.canvas-wrap:not(.playing) canvas { min-width:0; width:100%; }
.canvas-wrap:has(#lobby-card:not([hidden])) canvas { position:absolute; inset:0; visibility:hidden; }
.lobby-card, .results-card, .countdown-card { max-width:100%; }
.lobby-bots { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lobby-image, .setup-preview { display:block; width:100%; padding:0; border:1px solid #566747; background:#131c15; border-radius:8px; overflow:hidden; margin:0 0 18px; color:var(--text); }
.lobby-image img, .setup-preview img { display:block; width:100%; height:125px; object-fit:contain; background:#101710; }
.lobby-image span, .setup-preview span { display:block; padding:9px; font-size:12px; }
.setup-preview { grid-column:1/-1; margin:0; }
.setup-preview img { height:170px; }
.spectator-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 18px; background:#273521; border-bottom:1px solid #4b6239; }
.spectator-toolbar p { flex:1 1 100%; margin:0; font-size:12px; color:var(--lime); }
.spectator-toolbar label { flex:1; min-width:150px; }
.spectator-toolbar strong { font-size:13px; font-weight:500; }
#reference-large { max-height:65vh; object-fit:contain; }

.workspace.classic-workspace { grid-template-columns:minmax(0,1fr); }
.classic-workspace .sidebar, .classic-workspace .fairness-note, .classic-workspace .position-metric { display:none; }
.classic-workspace .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
.classic-actions { display:flex; gap:10px; flex-wrap:wrap; }
#puzzle-view .page-heading { flex-wrap:wrap; }
#keyboard-dialog .keyboard-help { margin:0; }
#keyboard-dialog p, #abandon-dialog p { font-size:13px; line-height:1.8; }