.clue-manor-shell{
  width:100%;
  min-width:0;
  height:100%;
  container-type:inline-size;
  color:var(--text);
}
.clue-manor-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,22rem);
  gap:clamp(.7rem,1.8cqi,1.25rem);
  width:100%;
  height:100%;
  min-height:0;
  align-items:center;
}
.clue-manor-board-panel{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  height:100%;
}
.clue-manor-board{
  --clue-manor-room-border:2.5px;
  display:grid;
  grid-template-columns:1.25rem repeat(var(--clue-manor-size),minmax(0,1fr));
  width:min(100%,42rem,72vh);
  max-width:42rem;
  min-width:0;
  padding:.3rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.clue-manor-axis{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:1.1rem;
  color:var(--text-subtle,var(--muted));
  font-size:clamp(.6rem,1.4cqi,.74rem);
  font-weight:850;
  line-height:1;
  user-select:none;
}
.clue-manor-axis--corner{
  color:var(--game-accent,var(--product-puzzles));
  font-size:.82rem;
}
.clue-manor-cell{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  aspect-ratio:1;
  padding:0;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  touch-action:manipulation;
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.clue-manor-cell.room-top{border-top-width:var(--clue-manor-room-border);border-top-color:var(--game-accent,var(--product-puzzles))}
.clue-manor-cell.room-right{border-right-width:var(--clue-manor-room-border);border-right-color:var(--game-accent,var(--product-puzzles))}
.clue-manor-cell.room-bottom{border-bottom-width:var(--clue-manor-room-border);border-bottom-color:var(--game-accent,var(--product-puzzles))}
.clue-manor-cell.room-left{border-left-width:var(--clue-manor-room-border);border-left-color:var(--game-accent,var(--product-puzzles))}
.clue-manor-cell.is-highlighted{
  background:var(--game-accent,var(--product-puzzles));
  box-shadow:inset 0 0 0 1px var(--game-accent,var(--product-puzzles));
  z-index:1;
}
.clue-manor-cell.is-occupied{
  background:var(--surface);
}
.clue-manor-cell.is-drop-target{
  box-shadow:inset 0 0 0 3px var(--game-accent,var(--product-puzzles));
  transform:scale(.96);
  z-index:3;
}
.clue-manor-cell.is-blocked{
  cursor:default;
  background:var(--surface-strong,var(--surface));
}
.clue-manor-cell:focus-visible{
  outline:3px solid var(--focus,var(--game-accent,var(--product-puzzles)));
  outline-offset:-3px;
  z-index:5;
}
.clue-manor-room-label{
  position:absolute;
  inset-block-start:.18rem;
  inset-inline-start:.22rem;
  max-width:calc(100% - .35rem);
  overflow:hidden;
  color:var(--text-subtle,var(--muted));
  font-size:clamp(.36rem,1.05cqi,.56rem);
  font-weight:850;
  line-height:1;
  text-overflow:ellipsis;
  text-transform:uppercase;
  letter-spacing:.035em;
  white-space:nowrap;
  pointer-events:none;
  opacity:.72;
  z-index:1;
}
.clue-manor-person{
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
  inline-size:clamp(1.55rem,5.7cqi,3.2rem);
  block-size:clamp(1.55rem,5.7cqi,3.2rem);
  border:2px solid var(--game-accent,var(--product-puzzles));
  border-radius:50%;
  background:var(--game-accent,var(--product-puzzles));
  color:var(--accent-contrast,#fff);
  font-size:clamp(.78rem,2.8cqi,1.42rem);
  font-weight:950;
  line-height:1;
  box-shadow:var(--shadow-sm);
}
.clue-manor-person--hider{
  background:var(--text);
  border-color:var(--text);
  animation:clue-manor-reveal .35s ease-out both;
}
.clue-manor-pencils{
  position:absolute;
  inset:auto .14rem .13rem;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.08rem;
  pointer-events:none;
}
.clue-manor-pencils i{
  display:grid;
  place-items:center;
  min-inline-size:.72rem;
  min-block-size:.72rem;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--surface);
  color:var(--text-subtle,var(--muted));
  font-size:clamp(.36rem,.9cqi,.52rem);
  font-style:normal;
  font-weight:850;
  line-height:1;
}
.clue-manor-furniture{
  position:absolute;
  inset:50% auto auto 50%;
  z-index:0;
  display:block;
  transform:translate(-50%,-50%);
  pointer-events:none;
  color:var(--text-subtle,var(--muted));
  opacity:.72;
}
.clue-manor-furniture--sofa{
  inline-size:58%;
  block-size:29%;
  border:2px solid currentColor;
  border-radius:7px 7px 4px 4px;
}
.clue-manor-furniture--sofa::before{
  content:"";
  position:absolute;
  inset:-45% 7% auto;
  block-size:56%;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:7px 7px 0 0;
}
.clue-manor-furniture--sofa::after{
  content:"";
  position:absolute;
  inset:auto 9% -34%;
  block-size:31%;
  border-inline:2px solid currentColor;
}
.clue-manor-furniture--armchair{
  inline-size:42%;
  block-size:42%;
  border:2px solid currentColor;
  border-radius:9px 9px 5px 5px;
  box-shadow:none;
}
.clue-manor-furniture--table{
  inline-size:38%;
  block-size:38%;
  border:2px solid currentColor;
  border-radius:50%;
}
.clue-manor-furniture--plant{
  inline-size:25%;
  block-size:36%;
  border:2px solid currentColor;
  border-radius:50% 50% 42% 42%;
}
.clue-manor-furniture--plant::after{
  content:"";
  position:absolute;
  inset:auto 26% -36%;
  block-size:35%;
  border:2px solid currentColor;
  border-top:0;
  border-radius:0 0 4px 4px;
}
.clue-manor-furniture--statue{
  inline-size:34%;
  block-size:44%;
  border:2px solid currentColor;
  border-radius:50% 50% 18% 18%;
}
.clue-manor-furniture--statue::after{
  content:"";
  position:absolute;
  inset:auto -18% -30%;
  block-size:17%;
  border:2px solid currentColor;
  border-radius:2px;
}
.clue-manor-clues{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  min-width:0;
  max-height:100%;
  padding:.65rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
}
.clue-manor-instructions{
  margin:0;
  color:var(--text-subtle,var(--muted));
  font-size:.78rem;
  line-height:1.42;
}
.clue-manor-clue-list{
  display:grid;
  gap:.48rem;
  min-height:0;
  overflow:auto;
  padding-inline-end:.1rem;
}
.clue-manor-card{
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.clue-manor-card.is-selected{
  border-color:var(--game-accent,var(--product-puzzles));
  box-shadow:inset 0 0 0 1px var(--game-accent,var(--product-puzzles));
}
.clue-manor-card.is-placed .clue-manor-avatar{
  background:var(--game-accent,var(--product-puzzles));
  color:var(--accent-contrast,#fff);
}
.clue-manor-guest-handle{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.55rem;
  width:100%;
  min-height:3.25rem;
  padding:.48rem .55rem;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:start;
  cursor:grab;
  touch-action:pan-y;
}
.clue-manor-guest-handle:active{cursor:grabbing}
.clue-manor-guest-handle.is-dragging{opacity:.7}
.clue-manor-guest-handle:focus-visible,
.clue-manor-part:focus-visible{
  outline:3px solid var(--focus,var(--game-accent,var(--product-puzzles)));
  outline-offset:-3px;
}
.clue-manor-avatar{
  display:grid;
  place-items:center;
  inline-size:2rem;
  block-size:2rem;
  border:2px solid var(--game-accent,var(--product-puzzles));
  border-radius:50%;
  color:var(--game-accent,var(--product-puzzles));
  font-weight:950;
}
.clue-manor-guest-title{
  display:grid;
  gap:.08rem;
  min-width:0;
}
.clue-manor-guest-title strong{
  font-size:.86rem;
  line-height:1.1;
}
.clue-manor-guest-title small{
  overflow:hidden;
  color:var(--text-subtle,var(--muted));
  font-size:.68rem;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.clue-manor-guest-state{
  color:var(--game-accent,var(--product-puzzles));
  font-size:1.05rem;
  font-weight:950;
}
.clue-manor-part-list{
  display:flex;
  flex-wrap:wrap;
  gap:.28rem;
  padding:0 .5rem .5rem 3.05rem;
}
.clue-manor-part{
  min-height:1.7rem;
  padding:.22rem .46rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-subtle,var(--muted));
  font:inherit;
  font-size:.64rem;
  font-weight:750;
  line-height:1.1;
  cursor:pointer;
}
.clue-manor-part:hover,
.clue-manor-part.is-active{
  border-color:var(--game-accent,var(--product-puzzles));
  color:var(--text);
}
.clue-manor-part.is-active{
  background:var(--game-accent,var(--product-puzzles));
}
@keyframes clue-manor-reveal{
  from{opacity:0;transform:scale(.55)}
  to{opacity:1;transform:scale(1)}
}
@container (max-width:760px){
  .clue-manor-workspace{
    display:flex;
    flex-direction:column;
    height:auto;
    align-items:stretch;
  }
  .clue-manor-clues{
    order:-1;
    padding:.45rem;
    max-height:none;
  }
  .clue-manor-instructions{
    font-size:.72rem;
  }
  .clue-manor-clue-list{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    gap:.4rem;
    padding-block-end:.12rem;
    scroll-snap-type:x proximity;
  }
  .clue-manor-card{
    flex:0 0 min(17.5rem,82cqi);
    scroll-snap-align:start;
  }
  .clue-manor-board-panel{
    height:auto;
    min-height:0;
  }
  .clue-manor-board{
    width:min(100%,36rem);
  }
}
@container (max-width:460px){
  .clue-manor-board{
    --clue-manor-room-border:2px;
    grid-template-columns:1.05rem repeat(var(--clue-manor-size),minmax(0,1fr));
    padding:.18rem;
    border-radius:13px;
  }
  .clue-manor-room-label{
    inset-block-start:.12rem;
    inset-inline-start:.13rem;
    font-size:.34rem;
  }
  .clue-manor-person{
    inline-size:clamp(1.45rem,8.4cqi,2.45rem);
    block-size:clamp(1.45rem,8.4cqi,2.45rem);
  }
  .clue-manor-card{
    flex-basis:min(16.5rem,86cqi);
  }
  .clue-manor-part-list{
    padding-inline-start:.45rem;
  }
}
@media (prefers-reduced-motion:reduce){
  .clue-manor-cell,
  .clue-manor-card{transition:none}
  .clue-manor-person--hider{animation:none}
}