@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Inter&family=Erica+One&family=Kanit:wght@900&family=Mukta&family=Overpass&family=Rammetto+One&family=Roboto&family=Syncopate:wght@700&family=Titillium+Web:wght@900&family=Work+Sans:wght@400;900&display=swap');
@font-face {
  font-family: marigold;
  src: url(https://court-of-fables.neocities.org/assets/CSMarigold.otf); 
}
@font-face {
  font-family: dark;
  src: url(https://court-of-fables.neocities.org/assets/DarkReborn.ttf); 
}
/* GLOBAL PALETTE */
:root {
  --stone: rgba(227, 225, 223, 1);   /* #E3E1DF */
  --fog:   rgba(221, 220, 216, 1);   /* #DDDCD8 */
  --cloud: rgba(225, 218, 210, 1);   /* #E1DAD2 */
  --sand:  rgba(195, 176, 146, 1);   /* #C3B092 */
  --linen: rgba(234, 234, 233, 1);   /* #EAEAE9 */
  --wheat: rgba(213, 209, 193, 1);   /* #D5D1C1 */
  --smalt:  rgba(75, 128, 131, 1);   /* #CBEFDB (accent) */

  /* Semi-transparent variants */
  --sand70: rgba(195, 176, 146, 0.7);
  --sand90: rgba(195, 176, 146, 0.9);
  --wheat70: rgba(213, 209, 193, 0.7);
  --stone80: rgba(227, 225, 223, 0.8);

  --bodyfont: 500 11px/18px 'IBM Plex Sans', sans-serif;
  --serifcaps: 700 10px/10px 'Inria Serif', serif;
  --display: 'DM Serif Display', serif;
}
  body { 
  font: var(--bodyfont);
  font-size: 0.8125rem;
  line-height: 1.8;
  letter-spacing: 1px;
  color: #5F6152; 
  margin:0; 
  padding:20px;
  background-color: #EAEAE9;
  }
p { text-align:center; }
h1{
  font-weight: 900;
  font-size:60px;
  font-family:marigold;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
  color: #728B83;
  text-align:center;
  }

  .workspace {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-top:20px;
  }

  /* Floorplan container */
/* Remove container border */
#floorContainer {
  border: none;        /* removes border */
  position: relative;  /* keep positioning context for items */
  overflow: visible;   /* allow the floorplan to move outside */
  width: 100%;         /* optional: fill available width */
  height: 100%;        /* optional: fill available height */
}


#gridCanvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border:0 !important;
}



  /* Sidebar: toolbox */
  .sidebar {
    width:350px;
    text-align:center;
  }
  .buttons { margin-bottom:10px; }
  .buttons button { margin:5px; padding:8px 10px; cursor:pointer; width:100%; }
  .toolbox img { 
    width:60px; height:60px; 
    cursor:grab; 
    margin:5px; 
  }

  /* Properties panel */
  .props {
    width:180px;
    margin-left:20px; 
    background: var(--wheat); 
    padding:10px; 
    border-radius:8px;
  }
  .props button { margin:3px 0; width:100%; font-family:var(--bodyfont); font-size:.7rem; }
  .preview img { width:100px; height:100px; margin-bottom:5px; padding: 5px; background:var(--stone); border-radius:8px; border:2px solid var(--sand);}
.props input{width:95%; border-radius:8px; border: 2px solid var(--sand)}
  .searchBox { margin-bottom:10px; width:100%; padding:5px; border-radius:4px; border:2px solid var(--smalt); font-family:var(--bodyfont)}

  /* Placed items */
  .placed { 
    position:absolute; 
    transform:translate(-50%,-50%); 
    cursor:move; 
  }
  
  /* Collapsible styles */
.collapsible {
  background: #728B83;
  color: white;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 14px;
  font-family:var(--display);
  letter-spacing:2px;
  border-radius:25px;
  text-transform:uppercase;
  margin-top: 4px;
}

.active, .collapsible:hover {
  background: var(--smalt);
}

.content {
  display: flex;       /* always flex */
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
}

/* hidden state */
.content.hidden {
  display: none !important;
}

.floorplan-btn {
  background: none;       /* remove default button look */
  border: none;
  padding: 0;
  cursor: pointer;
}

.floorplan-btn.active {
  background-color: var(--sand90);
}

.texture-btn {
  width: 60px;
  height: 60px;
  margin: 4px;
  cursor: pointer;
  border: 2px solid var(--smalt);
  border-radius: 6px;
}

.texture-btn.active {
  outline: 2px solid #fff;
  background-color: rgba(255,255,255,0.1);
}