.topbar-right{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.topbar-user{font-size:8px;color:var(--text2);}
.topbar-btn{padding:5px 8px;background:var(--bg3);border:1px solid var(--panel-border);color:var(--text);font-family:var(--font-main);font-size:7px;cursor:pointer;border-radius:4px;transition:all 0.15s;}
.topbar-btn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.game-layout{display:flex;flex:1;overflow:hidden;gap:2px;padding:4px;}
.panel{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;overflow:hidden;}
.panel-left,.panel-right{width:250px;flex-shrink:0;}
.panel-center{flex:1;min-width:280px;overflow:hidden;}
.panel-tabs{display:flex;background:var(--bg);border-bottom:1px solid var(--panel-border);flex-shrink:0;}
.ptab{flex:1;padding:7px 3px;background:transparent;border:none;color:var(--text-dim);font-family:var(--font-main);font-size:6px;cursor:pointer;border-right:1px solid var(--panel-border);transition:all 0.15s;}
.ptab:last-child{border-right:none;}
.ptab.active{background:var(--bg3);color:var(--accent);border-bottom:2px solid var(--accent);}
.ptab:hover:not(.active){background:var(--bg2);color:var(--text);}
.panel-content{flex:1;overflow-y:auto;padding:8px;}
.panel-center{display:flex;flex-direction:column;}
.middle-tabs{display:flex;background:var(--bg);border-bottom:1px solid var(--panel-border);flex-shrink:0;}
.mtab{flex:1;padding:8px 6px;background:var(--bg);border:none;border-right:1px solid var(--panel-border);color:var(--text-dim);font-family:var(--font-main);font-size:7px;cursor:pointer;transition:all 0.2s;}
.mtab:last-child{border-right:none;}
.mtab:hover{background:var(--bg2);color:var(--text);}
.mtab.active{background:var(--panel);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);}
.middle-view{display:flex;flex-direction:column;flex:1;min-height:0;}
.middle-placeholder{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:linear-gradient(180deg,#2b3944 0%,#263641 100%);}
.middle-placeholder-title{font-family:var(--font-big);font-size:22px;color:var(--accent);}
.middle-placeholder-body{font-size:7px;color:var(--text-dim);line-height:1.9;}

/* SKY */
.sky-area{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0;transition:background 4s ease;}
.sky-sunny{background:linear-gradient(180deg,#4a9fd4 0%,#87ceeb 50%,#b8f0a0 100%);}
.sky-morning{background:linear-gradient(180deg,#ff7043 0%,#ffa726 35%,#ffcc80 60%,#c8e6c9 100%);}
.sky-cloudy{background:linear-gradient(180deg,#6d8fa8 0%,#90a8bc 55%,#b0c4d4 100%);}
.sky-windy{background:linear-gradient(180deg,#5b8fb5 0%,#78a8c8 55%,#a0c8e0 100%);}
.sky-rain{background:linear-gradient(180deg,#37474f 0%,#546e7a 50%,#78909c 100%);}
.sky-storm{background:linear-gradient(180deg,#1a2332 0%,#263238 50%,#37474f 100%);}
.sky-hail{background:linear-gradient(180deg,#455a64 0%,#607d8b 50%,#78909c 100%);}
.sky-snow{background:linear-gradient(180deg,#6d90aa 0%,#90aec4 50%,#d0e8f8 100%);}
.sky-night{background:linear-gradient(180deg,#0a0a1a 0%,#0d1525 50%,#1a2040 100%);}
.sky-night-overlay{background:linear-gradient(180deg,rgba(5,5,20,0.7),rgba(10,15,40,0.65))!important;}

/* CSS CLOUDS */
.clouds-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;}