/* ============================================================
   FLOOR DIRECTORY — full 5,000-room archive
   Night-lodge identity: teal deep, coral keys, cream ink.
   Virtualised grid: only on-screen tiles exist in the DOM.
   ============================================================ */

.floor{
  position:relative;
  padding:clamp(64px,7vw,110px) clamp(18px,4vw,60px) clamp(70px,8vw,120px);
  background:
    radial-gradient(120% 90% at 88% -10%,rgba(79,158,145,.16),transparent 60%),
    linear-gradient(180deg,var(--night) 0%,#081a20 52%,var(--night) 100%);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.floor:before{
  /* ceiling strip-light */
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,rgba(230,197,109,.55),transparent);
}

/* ---------- heading ---------- */
.floor-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:26px;align-items:end;max-width:1360px;margin:0 auto clamp(26px,3vw,40px);
}
.floor-head h2{
  font-family:var(--display);font-weight:400;line-height:.94;letter-spacing:.02em;
  font-size:clamp(50px,5.2vw,80px);margin:.12em 0 0;color:var(--cream);
}
.floor-head h2 i{
  font:700 .48em/1 var(--text);font-style:normal;text-transform:uppercase;
  letter-spacing:.08em;color:var(--coral);display:block;margin-bottom:.5em;
}
.floor-head>p{
  font-family:var(--text);font-size:clamp(15px,1.15vw,17px);line-height:1.5;
  color:rgba(241,231,203,.72);max-width:34ch;margin:0;
}
.vacancy{
  font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--butter);display:flex;align-items:center;gap:9px;white-space:nowrap;
}
.vacancy b{
  width:8px;height:8px;border-radius:50%;background:var(--butter);
  box-shadow:0 0 0 4px rgba(230,197,109,.18);animation:vac 2.4s steps(2,end) infinite;
}
@keyframes vac{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* ---------- control desk ---------- */
.floor-desk{
  max-width:1360px;margin:0 auto clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:minmax(200px,1.05fr) minmax(0,1.7fr) minmax(150px,.75fr) auto;
  gap:14px;align-items:center;
  padding:16px 18px;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(180deg,rgba(16,39,42,.94),rgba(11,32,38,.94));
  box-shadow:inset 0 1px 0 rgba(241,231,203,.07),0 18px 40px -28px #000;
}
.floor-desk label{display:block;position:relative}
.floor-desk label>span{
  position:absolute;top:-7px;left:11px;padding:0 6px;background:var(--paper);
  font-family:var(--text);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(241,231,203,.5);
}
.floor-desk input,.floor-desk select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:3px;
  background:rgba(7,16,22,.72);color:var(--cream);
  font-family:var(--text);font-size:14px;letter-spacing:.01em;
}
.floor-desk input:focus-visible,.floor-desk select:focus-visible{
  outline:2px solid var(--coral);outline-offset:1px;border-color:transparent;
}
.floor-desk input::placeholder{color:rgba(241,231,203,.34)}

.tier-row{display:flex;flex-wrap:wrap;gap:7px}
.tier{
  padding:9px 13px;border:1px solid var(--line);border-radius:3px;cursor:pointer;
  background:rgba(7,16,22,.55);color:rgba(241,231,203,.74);
  font-family:var(--text);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;transition:background .16s,color .16s,border-color .16s;
}
.tier:hover{border-color:var(--aqua);color:var(--cream)}
.tier[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#120a08}
.tier .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle}
.tier[data-tier="legendary"] .dot{background:var(--butter)}
.tier[data-tier="rare"]      .dot{background:var(--coral-dark)}
.tier[data-tier="uncommon"]  .dot{background:var(--aqua)}
.tier[data-tier="common"]    .dot{background:rgba(241,231,203,.45)}
.tier[data-tier="all"]       .dot{display:none}

.desk-readout{
  font-family:var(--display);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(241,231,203,.62);display:flex;align-items:baseline;gap:8px;white-space:nowrap;
}
.desk-readout b{font-size:25px;color:var(--cream);letter-spacing:.03em}
.shuffle{
  padding:10px 15px;border:1px solid var(--line);border-radius:3px;cursor:pointer;
  background:transparent;color:var(--cream);
  font-family:var(--text);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.shuffle:hover{border-color:var(--butter);color:var(--butter)}

/* ---------- virtualised grid ---------- */
.floor-grid-outer{max-width:1360px;margin:0 auto;position:relative}
#floor-scroll{
  height:min(76vh,860px);overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--line);border-radius:4px;
  background:
    linear-gradient(180deg,rgba(7,16,22,.55),rgba(7,16,22,.9)),
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(241,231,203,.028) 78px 79px);
  padding:14px;
  scrollbar-color:var(--teal) transparent;scrollbar-width:thin;
  overscroll-behavior:contain;
  content-visibility:auto;
}
#floor-scroll::-webkit-scrollbar{width:10px}
#floor-scroll::-webkit-scrollbar-track{background:rgba(7,16,22,.5)}
#floor-scroll::-webkit-scrollbar-thumb{background:var(--teal);border-radius:0}
#floor-scroll::-webkit-scrollbar-thumb:hover{background:var(--aqua)}

#floor-sizer{position:relative;width:100%}
#floor-rows{position:absolute;inset:0 0 auto;will-change:transform}
.floor-row{display:grid;gap:var(--gap,12px);position:absolute;left:0;right:0}

/* ---------- room tile ---------- */
.room-tile{
  position:relative;display:block;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:var(--deep);
  transition:border-color .15s,transform .15s;
  contain:content;
}
.room-tile:hover,.room-tile:focus-visible{border-color:var(--butter);transform:translateY(-2px);outline:none;z-index:2}
.room-tile:focus-visible{box-shadow:0 0 0 2px var(--coral)}
.room-tile img{
  /* height must be pinned in CSS: the intrinsic height="216" attribute
     otherwise beats aspect-ratio and overflows the square tile, cropping
     the character out of frame. */
  display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;
  image-rendering:pixelated;background:var(--pool);
}
.room-tile .tile-no{
  position:absolute;top:0;left:0;padding:3px 7px 4px;
  font-family:var(--display);font-size:12px;letter-spacing:.05em;
  background:rgba(7,16,22,.86);color:var(--cream);border-bottom-right-radius:3px;
  pointer-events:none;
}
.room-tile .tile-rank{
  position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  pointer-events:none;box-shadow:0 0 0 2px rgba(7,16,22,.75);
}
.room-tile[data-tier="legendary"] .tile-rank{background:var(--butter)}
.room-tile[data-tier="rare"]      .tile-rank{background:var(--coral-dark)}
.room-tile[data-tier="uncommon"]  .tile-rank{background:var(--aqua)}
.room-tile[data-tier="common"]    .tile-rank{background:rgba(241,231,203,.4)}
.room-tile .tile-key{
  position:absolute;inset:auto 0 0;padding:5px 7px;
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  background:linear-gradient(0deg,rgba(7,16,22,.94),transparent);
  font-family:var(--text);font-weight:700;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(241,231,203,.8);
  opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;
  pointer-events:none;
}
.room-tile:hover .tile-key,.room-tile:focus-visible .tile-key{opacity:1;transform:none}

.floor-empty{
  padding:54px 20px;text-align:center;
}
.floor-empty b{
  display:block;font-family:var(--text);font-weight:700;font-size:19px;
  color:var(--cream);margin-bottom:8px;
}
.floor-empty span{
  display:block;font-family:var(--text);font-size:14px;
  color:rgba(241,231,203,.62);margin-bottom:18px;
}
.floor-empty button{
  padding:11px 18px;border:1px solid var(--coral);border-radius:3px;cursor:pointer;
  background:transparent;color:var(--coral);
  font-family:var(--text);font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
}
.floor-empty button:hover{background:var(--coral);color:#120a08}

.floor-foot{
  max-width:1360px;margin:16px auto 0;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-family:var(--text);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(241,231,203,.5);
}
.floor-foot i{font-style:normal;color:rgba(241,231,203,.75)}

/* ---------- room sheet: rarity rows ---------- */
.sheet-rank{
  display:flex;align-items:baseline;gap:9px;margin:2px 0 12px;
  font-family:var(--text);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.sheet-rank b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.03em;color:var(--cream)}
.sheet-rank span[data-tier]{padding:3px 8px;border-radius:2px;font-size:10px;color:#0a1418}
.sheet-rank span[data-tier="legendary"]{background:var(--butter)}
.sheet-rank span[data-tier="rare"]{background:var(--coral-dark)}
.sheet-rank span[data-tier="uncommon"]{background:var(--aqua)}
.sheet-rank span[data-tier="common"]{background:rgba(241,231,203,.6)}
#room-traits .pct{
  font-family:var(--display);font-size:13px;letter-spacing:.04em;
  color:rgba(241,231,203,.66);margin-left:7px;
}
#room-traits .bar{
  display:block;height:2px;margin-top:5px;background:rgba(241,231,203,.14);border-radius:2px;overflow:hidden;
}
#room-traits .bar i{display:block;height:100%;background:var(--aqua)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .floor-head{grid-template-columns:minmax(0,1fr);gap:14px}
  .floor-desk{grid-template-columns:minmax(0,1fr);gap:16px}
  .desk-readout{justify-content:space-between}
  #floor-scroll{height:min(70vh,620px);padding:10px}
}
@media(max-width:520px){
  .floor{padding-left:12px;padding-right:12px}
  .room-tile .tile-key{display:none}
  .room-tile .tile-no{font-size:10.5px;padding:2px 5px 3px}
}
@media(prefers-reduced-motion:reduce){
  .vacancy b{animation:none}
  .room-tile{transition:none}
  .room-tile:hover,.room-tile:focus-visible{transform:none}
}