/* Freakopoly — the board object.
 *
 * Everything scales off --bs (board size), so one component serves the hero's
 * 2100px close crop and the theme section's 540px full board without any
 * per-context overrides beyond --bs itself.
 */

.fbo {
  --bs:620px;
  --slab-hi:#2f1a16; --slab:#261412; --slab-lo:#1d0f0c;
  --felt:#170b08; --tile-hi:#2f1a16; --tile-lo:#20110e;
  --fbo-glow:255 110 50;
  --fbo-ink:#e8cfae;
  position:relative;
  width:var(--bs); height:var(--bs); flex:none;
  display:grid;
  grid-template-columns:repeat(11,1fr);
  grid-template-rows:repeat(11,1fr);
  gap:calc(var(--bs) * 0.0045);
  padding:calc(var(--bs) * 0.016);
  border-radius:calc(var(--bs) * 0.031);
  /* contain the board's internal z-indexes (centre 1, tiles 2, grain 6):
     without this the board is position:relative + z-index:auto, so those
     layers compete with the board's SIBLINGS and paint over anything laid
     on top of it */
  isolation:isolate;
  background:
    url("../assets/tex-wood.webp") repeat,
    linear-gradient(150deg,var(--slab-hi),var(--slab) 45%,var(--slab-lo));
  background-size:calc(var(--bs) * 0.6) calc(var(--bs) * 0.6), auto;
  background-blend-mode:soft-light, normal;
  box-shadow:
    -5px -5px 12px rgba(255,150,90,0.07),
    6px 6px 14px rgba(0,0,0,0.6),
    0 24px 60px rgba(0,0,0,0.5),
    0 0 44px rgb(var(--fbo-glow) / 0.1),
    inset 0 1px 0 rgba(255,165,105,0.14);
  transition:background 0.5s ease, box-shadow 0.5s ease;
}
/* the routed channel the tile ring sits in */
.fbo::before {
  content:""; position:absolute; inset:calc(var(--bs) * 0.0095);
  border-radius:calc(var(--bs) * 0.024); pointer-events:none; z-index:0;
  background:rgba(9,4,2,0.42);
  box-shadow:inset 0 3px 10px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,170,110,0.06);
}
/* hand-finished, not printed */
.fbo::after {
  content:""; position:absolute; inset:0; z-index:6;
  border-radius:calc(var(--bs) * 0.031); pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fbo-center {
  grid-column:2 / 11; grid-row:2 / 11;
  position:relative; z-index:1;
  margin:calc(var(--bs) * 0.006);
  border-radius:calc(var(--bs) * 0.022);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--bs) * 0.014);
  background:
    url("../assets/tex-felt.webp") repeat,
    radial-gradient(ellipse 75% 55% at 50% 78%, rgb(var(--fbo-glow) / 0.14), transparent 65%),
    linear-gradient(180deg,var(--slab-lo),var(--felt));
  background-size:calc(var(--bs) * 0.48) calc(var(--bs) * 0.48), auto, auto;
  background-blend-mode:soft-light, normal, normal;
  box-shadow:inset 4px 4px 10px rgba(0,0,0,0.6), inset -3px -3px 8px rgba(255,150,90,0.07),
             inset 0 0 70px rgba(0,0,0,0.45);
  transition:background 0.5s ease;
}
/* the medallion artwork printed into the felt, masked to a soft ellipse so it
   melts into the material instead of reading as a pasted square. The art is a
   finished image, not an alpha mask like the tile emblems. */
.fbo-center::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--center-art) center / cover no-repeat;
  opacity:0.5;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 76%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 76%);
}
/* the hairline gold pinstripe inlaid just inside the hearth's lip */
.fbo-center::after {
  content:""; position:absolute; inset:calc(var(--bs) * 0.012); z-index:1;
  border-radius:calc(var(--bs) * 0.016); pointer-events:none;
  border:1px solid rgba(255,190,125,0.13);
  box-shadow:inset 0 0 14px rgba(255,140,70,0.05);
}
.fbo-brand {
  position:relative; z-index:2;
  font-family:"Cinzel",serif; font-weight:600;
  font-size:calc(var(--bs) * 0.042); letter-spacing:0.19em;
  text-transform:uppercase; color:var(--fbo-ink);
  opacity:0.82; text-indent:0.19em;
  transition:color 0.5s ease;
}
.fbo-rule {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:calc(var(--bs) * 0.012);
  width:38%; opacity:0.42; color:var(--fbo-ink);
}
.fbo-rule i { flex:1; height:1px; background:currentColor; }
.fbo-rule span { font-size:calc(var(--bs) * 0.016); }

/* ---------- tiles ---------- */
.fbo-sp {
  position:relative; z-index:2; display:flex; overflow:hidden;
  border-radius:calc(var(--bs) * 0.008);
  background:linear-gradient(165deg,var(--tile-hi),var(--tile-lo));
  box-shadow:inset 0 1px 0 rgba(255,170,110,0.08), 0 2px 4px rgba(0,0,0,0.45);
  transition:background 0.5s ease;
}
.fbo-sp > * { pointer-events:none; }
.fbo-sp.side-bottom { flex-direction:column; }
.fbo-sp.side-top    { flex-direction:column-reverse; }
.fbo-sp.side-left   { flex-direction:row-reverse; }
.fbo-sp.side-right  { flex-direction:row; }
.fbo-bar { background:var(--g,transparent); flex:0 0 17%; }
.fbo-body {
  flex:1; min-width:0; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--bs) * 0.003); padding:calc(var(--bs) * 0.005); text-align:center;
}
.fbo-em {
  width:46%; aspect-ratio:1; flex:none;
  background-color:var(--ink,var(--fbo-ink)); opacity:0.9;
  -webkit-mask-image:var(--emblem); mask-image:var(--emblem);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.fbo-name {
  font-family:"Space Grotesk",sans-serif; font-weight:500;
  font-size:calc(var(--bs) * 0.0092); line-height:1.18;
  letter-spacing:0.01em; color:#d8bfa8;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
  flex:none; /* a squeezed box slices its last line instead of ellipsising */
}
.fbo-price {
  font-family:"Space Grotesk",sans-serif; font-weight:400;
  font-size:calc(var(--bs) * 0.0092); color:#9c8577; letter-spacing:0.02em;
  flex:none;
}
.fbo-sp.is-corner .fbo-body { padding:calc(var(--bs) * 0.008); gap:calc(var(--bs) * 0.006); }
.fbo-sp.is-corner .fbo-em { width:52%; }
.fbo-sp.is-corner .fbo-name { font-size:calc(var(--bs) * 0.0105); }

/* development level: the gem studs the game uses for houses and hotels */
.fbo-gems { display:flex; gap:calc(var(--bs) * 0.0035); height:calc(var(--bs) * 0.009); }
.fbo-gems:empty { display:none; }
.fbo-gems i {
  width:calc(var(--bs) * 0.008); height:calc(var(--bs) * 0.008); border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ffe9c9, #c98f4a);
  box-shadow:0 0 calc(var(--bs) * 0.008) rgba(255,214,150,0.55);
}
.fbo-gems i.hotel {
  width:calc(var(--bs) * 0.013); border-radius:2px;
  background:radial-gradient(circle at 34% 30%, #ffb9c0, #a63d52);
  box-shadow:0 0 calc(var(--bs) * 0.01) rgba(224,102,111,0.65);
}

/* ---------- the hero's close crop ----------
   At a ~168px tile the stock proportions overflow the tile body, so the
   emblem is pulled in and the name and price are sized to the space that
   leaves. */
.hero-corner .fbo-em { width:27%; }
.hero-corner .fbo-sp.is-corner .fbo-em { width:33%; }
.hero-corner .fbo-body { gap:calc(var(--bs) * 0.0018); padding:calc(var(--bs) * 0.004); }
.hero-corner .fbo-name {
  font-size:calc(var(--bs) * 0.0086); -webkit-line-clamp:3; line-height:1.16;
  color:#ecd8c2; text-shadow:0 1px 2px rgba(0,0,0,0.7);
}
.hero-corner .fbo-sp.is-corner .fbo-name { font-size:calc(var(--bs) * 0.0092); }
.hero-corner .fbo-price { font-size:calc(var(--bs) * 0.0072); }