/* ── Board: map wrap, grid, cells, floor textures, furniture, avatars ── */

.map-wrap{
  background:#b8956c;
  border-radius:6px;padding:16px;
  box-shadow:0 6px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;
  border:4px solid #6b4a2a;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:6px 6px, 8px 8px;
  background-position:0 0, 3px 3px;
}
#compass{
  position:absolute;top:8px;right:8px;z-index:10;
  opacity:0.85;pointer-events:none;
  filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.15));
}
.scene-name{
  font-family:'Caveat',cursive;font-size:22px;color:#3a2a18;
  text-align:center;margin-bottom:12px;
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
}
#map-grid{
  display:grid;gap:0;margin:0 auto;
  border:4px solid var(--black);border-radius:4px;overflow:hidden;
  position:relative;background:#fff;
}
.cell{
  position:relative;cursor:pointer;transition:all 0.12s;
  display:flex;align-items:center;justify-content:center;
  min-width:0;aspect-ratio:1;overflow:visible;
}
.cell:hover{filter:brightness(1.1);z-index:2}
.cell.highlight{outline:3px solid #f4c87a;outline-offset:-3px;z-index:3}
/* Thick room borders */
.cell.bt{border-top:3.5px solid var(--black)!important}
.cell.bb{border-bottom:3.5px solid var(--black)!important}
.cell.bl{border-left:3.5px solid var(--black)!important}
.cell.br{border-right:3.5px solid var(--black)!important}
/* Subtle inner grid */
.cell{border:0.5px solid rgba(0,0,0,0.08)}

/* ── Floor tile textures (multiple variants per type) ── */

/* Wood 0: Planks — multi-layer vertical grain */
.cell.floor-wood-0{
  background-image:
    repeating-linear-gradient(90deg,transparent,transparent 38%,rgba(120,80,30,0.08) 38%,rgba(120,80,30,0.08) 40%,transparent 40%,transparent 100%),
    repeating-linear-gradient(90deg,transparent,transparent 70%,rgba(100,60,20,0.05) 70%,rgba(100,60,20,0.05) 71%,transparent 71%,transparent 100%),
    radial-gradient(ellipse 3px 8px,rgba(90,55,15,0.06) 0%,transparent 100%);
  background-size:auto,auto,20px 30px;
  background-position:0 0,0 0,10px 5px;
}
/* Wood 1: Herringbone — V-pattern parquet */
.cell.floor-wood-1{
  background-image:
    repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(120,80,30,0.09) 4px,rgba(120,80,30,0.09) 5px),
    repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(100,65,25,0.07) 4px,rgba(100,65,25,0.07) 5px);
  background-size:14px 14px;
}
/* Wood 2: Wide horizontal boards */
.cell.floor-wood-2{
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 12px,rgba(120,80,30,0.10) 12px,rgba(120,80,30,0.10) 13px),
    repeating-linear-gradient(90deg,transparent,transparent 45%,rgba(100,60,20,0.04) 45%,rgba(100,60,20,0.04) 46%,transparent 46%,transparent 100%);
}

/* Tile 0: Grid — clean grout lines with depth */
.cell.floor-tile-0{
  background-image:
    linear-gradient(rgba(0,0,0,0.07) 1px,rgba(0,0,0,0.02) 2px,transparent 2px),
    linear-gradient(90deg,rgba(0,0,0,0.07) 1px,rgba(0,0,0,0.02) 2px,transparent 2px);
  background-size:12px 12px;
}
/* Tile 1: Diamond — 45deg rotated grid */
.cell.floor-tile-1{
  background-image:
    linear-gradient(45deg,rgba(0,0,0,0.07) 1px,transparent 1px),
    linear-gradient(-45deg,rgba(0,0,0,0.07) 1px,transparent 1px);
  background-size:10px 10px;
}
/* Tile 2: Brick / subway tile — staggered rows */
.cell.floor-tile-2{
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(0,0,0,0.08) 9px,rgba(0,0,0,0.08) 10px),
    repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(0,0,0,0.08) 18px,rgba(0,0,0,0.08) 19px);
  background-size:19px 20px;
  background-position:0 0;
}

/* Grass 0: Dense lawn — layered blade tufts */
.cell.floor-grass-0{
  background-image:
    repeating-linear-gradient(95deg,transparent,transparent 3px,rgba(30,100,20,0.10) 3px,rgba(30,100,20,0.10) 4px,transparent 4px,transparent 8px),
    repeating-linear-gradient(85deg,transparent,transparent 5px,rgba(50,120,30,0.08) 5px,rgba(50,120,30,0.08) 6px,transparent 6px,transparent 11px),
    repeating-linear-gradient(100deg,transparent,transparent 2px,rgba(20,80,10,0.06) 2px,rgba(20,80,10,0.06) 3px,transparent 3px,transparent 9px),
    radial-gradient(ellipse 2px 3px,rgba(40,110,25,0.08) 0%,transparent 100%);
  background-size:8px 10px,11px 8px,9px 12px,14px 14px;
  background-position:0 0,2px 3px,5px 1px,4px 7px;
}
/* Grass 1: Wild meadow — sparser angled blades with clumps */
.cell.floor-grass-1{
  background-image:
    repeating-linear-gradient(80deg,transparent,transparent 6px,rgba(30,100,20,0.09) 6px,rgba(30,100,20,0.09) 7px,transparent 7px,transparent 14px),
    repeating-linear-gradient(110deg,transparent,transparent 8px,rgba(50,130,30,0.07) 8px,rgba(50,130,30,0.07) 9px,transparent 9px,transparent 18px),
    radial-gradient(ellipse 3px 4px,rgba(35,105,20,0.07) 0%,transparent 100%),
    radial-gradient(ellipse 2px 3px,rgba(60,130,40,0.05) 0%,transparent 100%);
  background-size:14px 12px,18px 10px,20px 18px,12px 16px;
  background-position:0 0,4px 5px,3px 9px,10px 2px;
}

/* Stone 0: Flagstone — angled crack lines */
.cell.floor-stone-0{
  background-image:
    linear-gradient(160deg,rgba(0,0,0,0.07) 1px,transparent 1px),
    linear-gradient(70deg,rgba(0,0,0,0.06) 1px,transparent 1px),
    linear-gradient(250deg,rgba(0,0,0,0.03) 1px,transparent 1px);
  background-size:20px 14px,14px 20px,30px 22px;
}
/* Stone 1: Cobblestone — rounded bumps */
.cell.floor-stone-1{
  background-image:
    radial-gradient(circle,rgba(0,0,0,0.06) 3px,transparent 3.5px),
    radial-gradient(circle,rgba(0,0,0,0.03) 2px,transparent 2.5px);
  background-size:10px 10px,10px 10px;
  background-position:0 0,5px 5px;
}
/* Stone 2: Ashlar — large rectangular blocks */
.cell.floor-stone-2{
  background-image:
    linear-gradient(rgba(0,0,0,0.08) 2px,transparent 2px),
    linear-gradient(90deg,rgba(0,0,0,0.08) 2px,transparent 2px);
  background-size:22px 16px;
}

/* Carpet 0: Plush pile — multi-layer fine dots */
.cell.floor-carpet-0{
  background-image:
    radial-gradient(circle,rgba(80,40,80,0.07) 0.5px,transparent 0.5px),
    radial-gradient(circle,rgba(60,30,60,0.04) 0.7px,transparent 0.7px);
  background-size:4px 4px,6px 6px;
  background-position:0 0,2px 2px;
}
/* Carpet 1: Woven flat-weave */
.cell.floor-carpet-1{
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(80,40,80,0.05) 2px,rgba(80,40,80,0.05) 3px),
    repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(60,30,60,0.04) 2px,rgba(60,30,60,0.04) 3px);
  background-size:6px 6px;
}

/* Concrete 0: Aggregate speckle */
.cell.floor-concrete-0{
  background-image:
    radial-gradient(circle,rgba(0,0,0,0.04) 1px,transparent 1px),
    radial-gradient(circle,rgba(0,0,0,0.02) 1.5px,transparent 1.5px);
  background-size:8px 8px,12px 12px;
  background-position:0 0,4px 6px;
}
/* Concrete 1: Brushed — horizontal streaks */
.cell.floor-concrete-1{
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.03) 3px,rgba(0,0,0,0.03) 4px),
    repeating-linear-gradient(0deg,transparent,transparent 7px,rgba(0,0,0,0.02) 7px,rgba(0,0,0,0.02) 8px);
}

/* Non-standable furniture overlay */
.cell.non-standable{cursor:not-allowed}
.cell.non-standable::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,0.04) 4px,rgba(0,0,0,0.04) 5px);
  pointer-events:none;z-index:2;
}

/* Room label badge */
.room-badge{
  position:absolute;bottom:1px;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,0.75);color:var(--black);
  font-size:clamp(4px,1.2vw,7px);font-weight:800;
  padding:0px 3px;border-radius:2px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:0.3px;z-index:4;
  border:1px solid rgba(0,0,0,0.3);pointer-events:none;
  max-width:95%;overflow:hidden;text-overflow:ellipsis;
}

/* Furniture SVG */
.cell .furn{
  position:absolute;width:72%;height:72%;
  pointer-events:none;z-index:1;
  filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.15));
}

/* ── X marks (blocked and manual — same style) ── */
.cell .block-x,
.cell .manual-x{
  position:absolute;z-index:3;pointer-events:none;
  width:44%;height:44%;opacity:0.6;
}

/* ── Placed character (portrait + initial) ── */
.cell .avatar{
  width:70%;height:70%;position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.15s;
}
.cell .avatar:hover{transform:scale(1.12)}
.cell .avatar svg{width:100%;height:100%}
.cell .avatar .av-letter{
  position:absolute;bottom:0;right:0;
  font-family:'Playfair Display',serif;font-size:clamp(8px,1.4vw,12px);
  color:#fff;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.45);border-radius:50%;
  width:clamp(14px,2vw,20px);height:clamp(14px,2vw,20px);
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}

/* Victim marker (portrait + initial) */
.cell .victim-marker{
  width:70%;height:70%;position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;
  border:2px dashed #d44;border-radius:6px;
  background:rgba(200,50,50,0.12);
}
.cell .victim-marker svg{width:100%;height:100%}
.cell .victim-marker .av-letter{
  position:absolute;bottom:0;right:0;
  font-family:'Playfair Display',serif;font-size:clamp(8px,1.4vw,12px);
  color:#fff;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,0.6);
  background:rgba(200,50,50,0.7);border-radius:50%;
  width:clamp(14px,2vw,20px);height:clamp(14px,2vw,20px);
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.cell .victim-x{
  position:absolute;width:44%;height:44%;z-index:6;pointer-events:none;
}

/* Notes in cell corner */
.cell .cell-notes{
  position:absolute;bottom:1px;right:2px;z-index:4;
  font-family:'Nunito',sans-serif;font-size:clamp(8px,2.5vw,14px);font-weight:900;
  color:#000;line-height:1.1;text-align:right;
  pointer-events:none;max-width:60%;word-break:break-all;
}