/* TileTakeover v0.2 */

*{box-sizing:border-box}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#1b1b1b;
color:#eee;
display:grid;
grid-template-columns:1fr 340px;
grid-template-areas:
"header header"
"stats stats"
"main panel"
"search search"
"footer footer";
min-height:100vh;
}
header{grid-area:header;background:#111;padding:18px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333}
.logo{font-size:28px;font-weight:bold;color:#f5b400}
nav a{color:#ddd;text-decoration:none;margin-left:24px}
nav a:hover{color:#f5b400}
.stats-bar{grid-area:stats;display:flex;gap:16px;padding:15px 20px;background:#252525;border-bottom:1px solid #333}
.stat-box{flex:1;background:#303030;border:1px solid #444;border-radius:8px;padding:10px;text-align:center}
.stat-label{font-size:12px;color:#aaa}
.stat-value{font-size:22px;font-weight:bold;color:#f5b400}
main{grid-area:main;padding:20px}
.grid-wrapper{background:#262626;border:1px solid #444;border-radius:10px;padding:15px}
.grid-message{text-align:center;color:#999;margin-bottom:10px}
#tileGrid{
display:grid;
grid-template-columns:repeat(50,32px);
grid-auto-rows:32px;
gap:2px;
overflow:auto;
height:650px;
border:1px solid #444;
background:#181818;
padding:2px;
}
.tile{
width:32px;height:32px;background:#3a3a3a;border:1px solid #555;cursor:pointer;
}
.tile:hover{background:#f5b400}
.tile-panel{
grid-area:panel;
background:#262626;
border-left:1px solid #444;
padding:20px;
display:flex;
flex-direction:column;
}
.hidden{display:flex}
.panel-header{display:flex;justify-content:space-between;align-items:center}
#closePanel{display:none}
.placeholder-image{
height:220px;border:2px dashed #555;border-radius:8px;
display:flex;align-items:center;justify-content:center;
color:#888;margin:20px 0;
}
.panel-section{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #3c3c3c}
.panel-label{color:#aaa}
.bid-button{
margin-top:24px;
padding:14px;
background:#f5b400;
border:none;
font-size:18px;
font-weight:bold;
cursor:pointer;
border-radius:8px;
}
.bid-button:hover{background:#ffca2f}
.search-panel{
grid-area:search;
display:flex;
justify-content:space-between;
padding:20px;
background:#222;
border-top:1px solid #333;
}
.search-panel input,.search-panel select{
padding:8px;border-radius:6px;border:1px solid #555;background:#333;color:#fff
}
.search-panel button{
padding:8px 16px;background:#444;color:#fff;border:0;border-radius:6px;cursor:pointer
}
footer{
grid-area:footer;
text-align:center;
padding:18px;
background:#111;
border-top:1px solid #333;
color:#888;
}