style.css

:root{
  --bg:#f7f5ef;
  --tile:#e9dfc8;
  --tile-odd:#d9cfa8;
  --highlight:#cfe8d6;
  --accent:#8b5e3c;
  --accent-2:#2f6f44;
  --red:#bb3b3b;
}

/* Reset and full-viewport layout */
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
html,body,#app{height:100%;width:100%;}
body{
  background:var(--bg);
  /* make the app occupy the full viewport */
  min-height:100vh;
  min-width:100vw;
  display:block;
  overflow:hidden;
}

/* Make the board container full-screen */
#board-container{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  border-radius:0;
  background:linear-gradient(180deg,#fff 0%,#fbf8f2 100%);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  box-shadow:none;
}

/* SVG should fill the container */
#board{width:100%;height:100%;display:block;background:transparent;}

/* center controls remain centered */
#center-overlay{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
  z-index:30;
}

#center-overlay button, #center-overlay #dice{
  pointer-events:auto;
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
}

#roll{ padding:8px 10px; min-width:96px; font-size:14px; border-radius:8px; }
#dice{ padding:6px 10px; border-radius:8px; font-size:14px; }

/* slightly smaller central controls on small screens */
#roll{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 4px 8px rgba(139,94,60,0.18);
  margin-bottom:8px;
  min-width:110px;
}

#dice{
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  border:2px solid var(--accent);
  font-weight:700;
}

/* HUD moved to top-left with floating style */
#hud{
  position:fixed;
  left:12px;
  top:12px;
  color:#222;
  display:flex;
  gap:8px;
  align-items:center;
  flex-direction:column;
  z-index:40;
  pointer-events:auto;
}

/* message panel slightly translucent */
#message{
  width:220px;
  background:rgba(255,255,255,0.95);
  padding:8px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  font-size:14px;
  text-align:right;
}

/* controls styling */
#controls button{
  padding:6px 8px;
  border-radius:8px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
}

.tile{
  stroke:#a08363;
  stroke-width:3;
  fill:#e6ddc6;
  transition:transform 180ms ease, box-shadow 180ms ease;
  /* subtle 3D block look */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.08));
  shape-rendering:geometricPrecision;
}

.tile.odd{ fill:var(--tile-odd); }

.tile.site{ fill:#fff4d9; stroke:#c99a5a; }
.tile.task{ fill:#e8fff7; stroke:#64b88b; }
.tile.player{ fill:var(--highlight); stroke:var(--accent-2); }

/* Bigger, bolder icons for sites/tasks so they stand out as markers */
#board .site-icon{
  font-size:28px;
  fill:#7a4f2d;
  font-weight:800;
  text-shadow: 0 1px 0 #fff;
  pointer-events:none;
}
#board .task-icon{
  font-size:30px;
  fill:#1b7a52;
  font-weight:900;
  pointer-events:none;
  text-shadow: 0 1px 0 #fff;
}

/* make player marker a bit larger and more prominent */
.player-marker{ r:12px; }
.player-marker{ fill:var(--accent-2); stroke:#fff; stroke-width:2.5; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.18)); }

/* Dice restyled to look like a small cube with depth */
#dice{
  background:#fff;
  border-radius:6px;
  padding:10px 14px;
  border:2px solid var(--accent);
  font-weight:900;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18), inset 0 -6px 10px rgba(0,0,0,0.04);
  min-width:54px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transform-style:preserve-3d;
}

/* small animated roll hint */
#roll:active ~ #dice, #roll:focus ~ #dice { transform: translateY(-2px) rotateX(6deg); transition:transform 160ms ease; }

.tile-label{
  font-size:11px;
  fill:#3b2f2a;
  pointer-events:none;
}

.player-marker{
  fill:var(--accent-2);
  stroke:#fff;
  stroke-width:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Modal stays centered above everything */
#modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.35);
  z-index:60;
}

#modal.hidden{ display:none; }

#modal-card{
  width:92%;
  max-width:520px;
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  direction:rtl;
  text-align:right;
}

#modal-title{ font-weight:800; margin-bottom:8px; font-size:18px; }
#modal-body{ margin-bottom:12px; font-size:15px; color:#222; }
#modal-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

button.small{ padding:8px 10px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer; }
button.primary{ background:var(--accent-2); color:white; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }

.option-btn{ padding:10px 12px; background:#f6f6f6; border-radius:8px; border:1px solid #eee; cursor:pointer; min-width:140px; text-align:center; }

/* Responsive tweaks */
@media (max-width:420px){
  #hud{ left:8px; top:8px; }
  #message{ width:160px; font-size:13px; }
  #roll{ min-width:100px; padding:8px; font-size:14px; }
}