:root{
  --bg:#f3f5f7;
  --panel:#ffffff;
  --accent:#2b7cff;
  --muted:#666;
}

*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  background:linear-gradient(180deg,#fff, #f7f9fb);
  border-bottom:1px solid #e6e9ee;
}
header h1{margin:0;font-size:20px}
#money{background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;font-weight:600}
main{padding:18px;flex:1}
.view{max-width:1100px;margin:0 auto}
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:12px;
}
.store-tile{
  background:var(--panel);
  min-height:120px;
  border-radius:8px;
  border:1px solid #e2e6ea;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.store-tile:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(33,33,33,0.06)}
.store-empty{color:var(--muted)}
.store-owned{background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid #dceeff}
.store-owned .small{font-size:13px;color:#1a73e8}
.instructions{margin-top:12px;color:var(--muted)}

.hidden{display:none}

.store-topbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.store-topbar button{padding:8px 12px;border-radius:6px;border:1px solid #cfd8e7;background:#fff;cursor:pointer}
.store-body{display:flex;gap:12px}
.left-panel{width:320px;background:var(--panel);padding:12px;border-radius:8px;border:1px solid #e6ebf2}
.right-panel{flex:1;background:var(--panel);padding:12px;border-radius:8px;border:1px solid #e6ebf2;display:flex;align-items:center;justify-content:center}

.action-row{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
button#buy-shelf{padding:10px;border-radius:6px;border:1px solid #cfd8e7;background:linear-gradient(#fff,#f6fbff);cursor:pointer}

.shelves-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.shelf-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;border:1px solid #eef3fa;background:#fff}
.shelf-controls button{padding:6px 8px;border-radius:6px;border:1px solid #d0d7e6;background:#f8fbff;margin-left:6px;cursor:pointer}

canvas{background:#dff0ff;border-radius:6px;border:1px solid #cbe0ff;display:block;max-width:100%}
footer{padding:10px 20px;text-align:center;color:var(--muted);font-size:13px}