*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
:root{
    --bg:#1f2329;
    --bg2:#2b3138;
    --bg3:#353c46;
    --border:#40444b;
    --text:#ececec;
    --text2:#b8bcc2;
    --blue:#4f8cff;
}
body{
    background:var(--bg);
    color:var(--text);
    font-family:Arial,sans-serif;
    overflow:hidden;
}
button{
    border:none;
    outline:none;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
}
#container{
    display:flex;
    flex-direction:column;
    height:100vh;
}
header{
    padding:18px 24px;
    border-bottom:1px solid var(--border);
}
.header-left{
    display:flex;
    align-items:center;
    gap:12px;
}
.header-left h1{
    font-size:28px;
    margin-right:8px;
}
.header-left a{
    padding:6px 12px;
    border-radius:10px;
    background:var(--bg2);
    color:var(--text2);
    text-decoration:none;
    transition:.15s;
}
.header-left a:hover{
    background:var(--blue);
    color:#fff;
}
#main-tabs{
    display:flex;
    gap:8px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
}
#main-tabs button{
    padding:10px 18px;
    border-radius:10px;
    transition:.15s;
}
#main-tabs button:hover{
    background:var(--bg3);
}
#main-tabs button.active{
    background:var(--blue);
    color:#fff;
}
main{
    display:flex;
    flex:1;
    overflow:hidden;
}
#sidebar{
    width:280px;
    overflow-y:auto;
    border-right:1px solid var(--border);
}
.submenu{
    display:none;
    padding:16px;
}
.submenu.active{
    display:block;
}
.submenu button{
    width:100%;
    padding:10px 14px;
    margin-bottom:6px;
    border-radius:10px;
    text-align:left;
    transition:.15s;
}
.submenu button:hover{
    background:var(--bg3);
}
.submenu button.active{
    background:var(--blue);
    color:#fff;
}
#content{
    flex:1;
    overflow-y:auto;
    padding:40px;
}
.page{
    display:none;
    max-width:1100px;
}

#tech-tree-overview{
    max-width:1400px;
}

.page.active{
    display:block;
}
.page h1{
    font-size:34px;
    margin-bottom:24px;
}
.page h2{
    font-size:26px;
    margin:24px 0 14px;
}
.page h3{
    font-size:20px;
    margin:20px 0 10px;
}
.page p{
    color:var(--text2);
    line-height:1.8;
    margin-bottom:14px;
}
.page ul{
    margin:0 0 20px 22px;
}
.page li{
    margin-bottom:8px;
    color:var(--text2);
}
.page img{
    display:block;
    max-width:100%;
    margin:24px 0;
    border-radius:10px;
}
.page table{
    width:100%;
    margin:20px 0;
    border-collapse:collapse;
}
.page th{
    background:var(--bg2);
}
.page th,.page td{
    padding:12px 14px;
    border:1px solid var(--border);
    text-align:left;
}
::-webkit-scrollbar{
    width:10px;
}
::-webkit-scrollbar-track{
    background:transparent;
}
::-webkit-scrollbar-thumb{
    background:#4b4f58;
    border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{
    background:#626875;
}


/* tech treee */
.container {
    width: 1400px;
    margin: 0 auto;
}

.page-heading {
    margin: 40px 20px;

    font-family: "Noto Serif", serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;

    color: #f2d79b;

    text-align: left;
    letter-spacing: 1px;

    text-shadow:
        2px 2px 0 #2a1c10,
        0 0 10px rgba(0, 0, 0, .35);
}

.page-heading a{
    
    font-family: "Noto Serif", serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;

    color: #f2d79b;
	text-decoration:none;
}

.section {
    display: flex;
}

.column {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.level-upgrade .column {
    position: relative;
}

.level-upgrade .column::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    background: #4a4a4a;
    transform: translateY(-50%);
}

.level-upgrade .upgrade-name {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 38px;
    margin: 0 auto;
    border: 2px solid #c79b5d;
    border-radius: 999px;
    background: #3b2a1d;
    color: white;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
	 box-shadow:
        0 0 0 6px #000,
        0 3px 8px rgba(0,0,0,.45);
}

.section-divider {
    position: relative;
    margin: 20px 0;
    height: 40px;
}

.section-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    background: #4a4a4a;
    transform: translateY(-50%);
}

.section-title {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 38px;
    margin: 0 auto;
    border: 2px solid #c79b5d;
    border-radius: 999px;
    background: #4b3421;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow:
        0 0 0 6px #000,
        0 3px 8px rgba(0,0,0,.45);
}

.building {
    display: grid;
    grid-template-columns: 96px auto;
    grid-template-areas:
        "image name"
        "image details";
    column-gap: 16px;
    align-items: start;
}

.building-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.building-row .building {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.building-row .building-right {
    width: 100%;
    text-align: left;
	padding-top:10px;
}

.building-image {
    grid-area: image;
    width: 96px;
}

.building-name {
    grid-area: name;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1;
	color:#F5E3A6;
	font-family : Noto Serif;
}

.building-details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.building-text {
    font-size: 16px;
    line-height: 1.3;
}

label.food {
    color: #f44a4a;
}

label.water {
    color: #4fc3ff;
}

label.iron {
    color: #a3dde9;
}

label.gold {
    color: #f4c542;
}

label.tree {
    color: #4caf50;
}

label.magic {
    color: #b57cff;
}

label.elite {
    color: #ff8c42;
}

label.resource {
    color: #f4c542;
}

label.worker {
	color:white;
}

label.warrior {
	color:white;
}

label.unit {
	color:white;
}

label.unit-cap {
	color:white;
}


label.movement {
	color:white;
}

label.ranged-attack {
	color:white;
}

label.location {
	color:white;
}

label.corpse {
	color:white;
}

label.white{
	color:white;
}

label.mill {
	color:#F5E3A6;
}

label.everfruit {
	color:#F5E3A6;
}

label.tower {
	color:white;
}

label.unit-tower {
}