/* AI_TAG: FRONTEND_GRAPHICS | MinePige theme and layout */
:root{
  --bg:#0d1a2b; --bg2:#13243b; --panel:#0f1f33cc; --ink:#e6f2ff; --muted:#9bb8d8; --accent:#7ad1ff; --accent2:#59ffa8; --danger:#ff607a; --grid:#183352; --tile:#11223a; --tile2:#0e1c31;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
#app{display:flex;flex-direction:column;min-height:100%}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:calc(.5rem + env(safe-area-inset-top)) .75rem .5rem;background:linear-gradient(180deg,#0b1526cc,transparent);box-shadow:0 2px 6px #0007}
.topbar .brand{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:.4px}
.topbar .actions{display:flex;gap:.4rem}
.topbar button{appearance:none;border:none;border-radius:10px;background:#17263dcc;color:var(--ink);padding:.4rem .7rem;font-weight:700;cursor:pointer;box-shadow:0 2px 6px #0008}
main{display:grid;grid-template-columns:280px 1fr;gap:1rem;flex:1;padding:.75rem}
.sidebar{display:flex;flex-direction:column;gap:.75rem}
.card{background:var(--panel);border:1px solid #243a5b;border-radius:12px;padding:.75rem;box-shadow:0 8px 24px #0009, inset 0 1px 0 #ffffff12}
.card h3{margin:.25rem 0 .5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.custom label{display:flex;align-items:center;justify-content:space-between;margin:.25rem 0;gap:.5rem}
.custom input{width:5rem}
.card.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.card .stat{display:flex;align-items:center;justify-content:space-between;background:#0f1e33aa;border:1px solid #21395c;padding:.4rem .5rem;border-radius:8px}
.card .stat span{color:var(--muted)}
.board-wrap{position:relative;background:radial-gradient(ellipse at top,#0b1528,#0b1526 40%,#0b152622 100%);border:1px solid #21395c;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-bottom:1px solid #21395c;background:#0f1e33aa}
.zoom{display:flex;align-items:center;gap:.4rem}
.zoom input[type="range"]{width:140px}
.mode{display:flex;align-items:center;gap:.6rem}
#board{width:100%;height:100%;display:block;background:linear-gradient(180deg,#0e1c31,#0b1526)}
footer{padding:.5rem .75rem;color:var(--muted)}
.muted{color:var(--muted)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at center,#0b1220cc 0%,#0b1220b3 40%,#0b122080 70%,#0b122033 100%);backdrop-filter:blur(4px)}
.overlay.hidden{display:none}
.panel{background:#0f1a2ecc;border:1px solid #243a5b;border-radius:14px;box-shadow:0 10px 30px #0009, inset 0 1px 0 #ffffff0a;padding:1rem 1.25rem;max-width:520px;margin:1rem}
.panel .row{display:flex;gap:1rem}
.panel button{appearance:none;border:none;border-radius:12px;padding:.6rem 1rem;font-weight:800;letter-spacing:.4px;background:linear-gradient(180deg,#2b4a76,#1d3353);color:var(--ink);box-shadow:0 6px 18px #0009, inset 0 1px 0 #ffffff1a;cursor:pointer}

/* Tile palette (numbers) */
:root{
  --n1:#9fd3ff; --n2:#7ad1ff; --n3:#59ffa8; --n4:#ffd36e; --n5:#ffb36e; --n6:#ff8b86; --n7:#caa1ff; --n8:#b1c3d9;
}

/* Mobile tweaks */
@media (max-width: 900px){
  main{grid-template-columns:1fr}
  .sidebar{order:2}
}