:root{
  --bg:#0b1220;
  --card:#0f1724;
  --accent:#a8ff7f;
  --muted:#bcd3c7;
  --glass: rgba(255,255,255,0.03);
  --sky: #87ceeb;
  --farm-ground: #a4c66b;
  --dirt: #8b5a2b;
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;padding:0;background:linear-gradient(180deg,#061017 0%, #0b1220 100%);font-family:Inter,system-ui,Segoe UI,Arial;}
.screen{display:flex;align-items:center;justify-content:center;height:100vh;width:100%;}
.hidden{display:none !important;}

#intro{animation:introPulse 2.4s ease-in-out both;}
@keyframes introPulse {
  0%{opacity:0; transform:scale(.98)}
  40%{opacity:1; transform:scale(1)}
}

.intro-content{color:var(--accent);text-align:center}
.intro-content h1{font-size:48px;margin:0 0 8px}
.intro-content .tag{color:var(--muted); margin-bottom:20px}
.intro-content button{background:transparent;border:1px solid var(--muted);padding:8px 12px;border-radius:8px;color:var(--muted);cursor:pointer}

.card{
  background:var(--card);
  border-radius:12px;
  padding:18px;
  width:360px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  color:#e6efe6;
}

.form{display:flex;flex-direction:column;gap:10px}
.form input{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:var(--glass);color:inherit}
.row{display:flex;gap:8px}
.row button{flex:1;padding:8px;border-radius:8px;border:0;background:var(--accent);color:#022;cursor:pointer}

.msg{margin-top:8px;color:#f0bfbf;font-size:13px}

.topbar{display:flex;justify-content:space-between;padding:10px 18px;background:rgba(255,255,255,0.02);color:var(--muted)}
#gameCanvas{padding:18px;color:var(--muted);min-height:60vh}
#canvas-container{width:100%;height:100vh;background:linear-gradient(var(--sky), #bfe9ff 60%)}
#ui-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
#ui{
position:absolute;
left:12px;
top:12px;
z-index:11;
color:#063;
pointer-events: auto;
}
#toolbar {
position: relative; /* This is key for dropdown positioning */
display: inline-block;
}
.tool, .tool-option {
padding: 6px 8px;
border-radius: 6px;
border: 1px solid #ccc;
background: white;
cursor: pointer;
pointer-events: auto;
display: block; /* Make options stack vertically */
width: 100%;
text-align: left;
box-sizing: border-box;
}
.tool.active { /* This class is no longer used for the active tool */
background: var(--accent);
color: white;
}
#active-tool-btn {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--accent);
color: white;
border-color: var(--accent);
}
#tool-dropdown {
position: absolute;
top: 100%; /* Position below the active button */
left: 0;
width: 100%;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 20;
background: white;
padding: 4px 0;
}
.tool-option:hover {
background: #f0f0f0;
}
.hidden {
display: none;
}
canvas{display:block}
#buy-menu{
position: absolute;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
text-align: center;
z-index: 20;
pointer-events: auto;
}
#buy-menu p{
margin-top: 0;
font-size: 1.2em;
color: #333;
}
#buy-menu button{
padding: 8px 16px;
margin: 0 8px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
#buy-menu button#buy-ok{
background: var(--accent);
color: white;
border-color: var(--accent);
}
/* New styles for secondary UI elements */
#secondary-ui {
display: flex;
gap: 12px;
align-items: center;
}
#inventory-btn {
padding: 8px 12px;
border-radius: 6px;
border: 1px solid #ccc;
background: white;
cursor: pointer;
pointer-events: auto;
}
#coin-count {
padding: 8px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.85);
display: flex;
gap: 4px;
align-items: center;
}
#coin-amount {
font-weight: bold;
}
/* Styles for the new inventory menu */
#inventory-menu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.95);
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
text-align: left;
min-width: 250px;
z-index: 30;
pointer-events: auto;
}
#inventory-menu h2 {
margin-top: 0;
color: #333;
font-size: 1.5em;
border-bottom: 2px solid var(--accent);
padding-bottom: 10px;
}
#inventory-list {
list-style: none;
padding: 0;
margin: 10px 0;
}
#inventory-list li {
padding: 8px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
color: #555;
}
#inventory-close-btn {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background: #ccc;
border: none;
border-radius: 5px;
cursor: pointer;
}