/* Thành Phố Đêm v18.8.1 — mobile viewport and clipped moon phase hotfix */
#cv{
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.livebar{pointer-events:auto}
.livepill.clickable,.livepill.clickable a{pointer-events:auto;cursor:pointer}

.bottom.v18-bottom{display:none!important}
.city-top-actions{
  position:fixed;
  top:calc(7px + env(safe-area-inset-top));
  left:50%;
  z-index:8;
  display:flex;
  align-items:center;
  gap:6px;
  transform:translateX(-50%);
}
.city-top-actions button{
  min-height:36px;
  padding:8px 11px;
  border:1px solid rgba(151,174,210,.28);
  border-radius:11px;
  background:rgba(15,26,48,.84);
  color:#dce5f2;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  backdrop-filter:blur(8px);
  font:12px 'Special Elite',monospace;
  white-space:nowrap;
  cursor:pointer;
}
.city-top-actions button:hover{border-color:rgba(240,205,110,.5);color:#f0cd6e}
.short-label{display:none}
.search-next{border-color:rgba(126,223,208,.46)!important;color:#7edfd0!important}

.city-loop-note{display:none!important}

.panel{
  background:
    radial-gradient(circle at 18% 8%,rgba(55,76,116,.2),transparent 34%),
    radial-gradient(circle at 82% 22%,rgba(90,55,92,.13),transparent 32%),
    #091226!important;
}
.panel .inner{width:min(1080px,100%);max-width:1080px!important}
.house-nav{position:relative;z-index:3;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.house-content{
  position:relative;
  margin-top:18px;
  padding:clamp(16px,3vw,30px);
  border:1px solid rgba(151,170,204,.16);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(18,30,54,.87),rgba(8,16,31,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025);
}

.house-interior{
  position:relative;
  height:clamp(230px,26vw,300px);
  min-height:230px;
  margin:0 0 20px;
  overflow:hidden;
  border:1px solid rgba(190,205,226,.25);
  border-radius:24px;
  background:#101a2a;
  box-shadow:0 28px 70px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.035);
  isolation:isolate;
}
.house-interior:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 35%,rgba(3,7,15,.3));
  box-shadow:inset 0 0 80px rgba(0,0,0,.4);
}
#houseInteriorCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.room-plaque,.room-detail{position:absolute;z-index:2}
.room-plaque{
  top:16px;
  left:18px;
  display:grid;
  gap:2px;
  max-width:min(52%,420px);
  padding:10px 13px;
  border:1px solid rgba(240,205,110,.25);
  border-radius:12px;
  background:rgba(7,13,25,.68);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.room-plaque span{color:#a7b2cc;font:10px 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.room-plaque strong{overflow:hidden;color:#f0cd6e;font:clamp(15px,2vw,20px) 'Special Elite',monospace;text-overflow:ellipsis;white-space:nowrap}
.room-detail{
  top:17px;
  right:18px;
  max-width:46%;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(7,13,25,.64);
  color:#c4cede;
  font:11px 'IBM Plex Sans',system-ui,sans-serif;
  backdrop-filter:blur(7px);
  line-height:1.35;
  text-align:right;
}
.apartment-interior{border-color:rgba(126,223,208,.28)}
.real-venue-interior{border-color:rgba(240,205,110,.34)}
.room-upgrades{position:absolute;left:18px;bottom:16px;z-index:2;display:flex;gap:5px;max-width:68%;flex-wrap:wrap}
.room-upgrades span{padding:5px 8px;border:1px solid rgba(240,205,110,.22);border-radius:999px;background:rgba(6,12,23,.68);color:#d7dfeb;font:10px 'IBM Plex Sans',system-ui,sans-serif;backdrop-filter:blur(7px)}
.venue-head,.house-interior + div{position:relative}
.venue-profile .venue-cover,.venue-profile .venue-photo{display:none!important}
.venue-profile-compact{width:100%;max-width:none;margin-top:14px}
.venue-profile-compact>.mini-note{padding:14px 16px;border:1px solid rgba(151,174,210,.18)!important;border-radius:14px!important;background:rgba(12,22,42,.58)!important;color:#aebbd0!important}
.venue-profile-compact .mono{color:#f0cd6e;margin-bottom:7px}
.venue-profile-copy{font-size:14px;line-height:1.62;color:#c8d2e2}
.venue-profile-compact .venue-note{margin-top:12px;padding:11px 12px;border:1px solid rgba(240,205,110,.18);border-radius:10px;background:rgba(240,205,110,.04)}
.apartment-address{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;margin:14px 0;padding:14px 16px;border:1px solid rgba(126,223,208,.2);border-radius:14px;background:linear-gradient(135deg,rgba(25,47,63,.45),rgba(12,22,39,.68))}
.apartment-address>div:first-child{display:grid;gap:3px}.apartment-address>div:first-child span{color:#7edfd0;font:9px 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.16em}.apartment-address strong{color:#e4eaf2;font:16px 'Special Elite',monospace}.apartment-address small{color:#91a0b6;font:12px 'IBM Plex Sans',system-ui,sans-serif}
.apartment-unit{display:grid;align-content:center;gap:3px;text-align:right}.apartment-unit b{color:#f0cd6e;font:14px 'Special Elite',monospace}.apartment-unit span{color:#9eacc0;font-size:12px}
.apartment-directory{grid-column:1/-1;display:grid;gap:10px;padding-top:11px;border-top:1px solid rgba(126,223,208,.12)}
.apartment-directory-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#7edfd0;font:10px 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.13em}.apartment-directory-head b{color:#f0cd6e;font-size:11px;letter-spacing:0}
.apartment-room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}
.apartment-room-card{position:relative;display:grid;gap:4px;min-width:0;padding:11px 12px;text-align:left;border:1px solid rgba(142,167,196,.2);border-radius:11px;background:linear-gradient(180deg,rgba(16,29,49,.88),rgba(8,16,29,.82));color:#cdd7e4;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.apartment-room-card:hover{transform:translateY(-1px);border-color:rgba(126,223,208,.48);background:rgba(22,42,58,.9)}
.apartment-room-card.current{border-color:rgba(240,205,110,.55);box-shadow:inset 3px 0 #f0cd6e;background:rgba(40,38,42,.78);cursor:default}.apartment-room-card .apartment-room-no{color:#7edfd0;font:9px 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.12em}.apartment-room-card strong{overflow:hidden;color:#e3e9f1;font:13px 'Special Elite',monospace;text-overflow:ellipsis;white-space:nowrap}.apartment-room-card small{color:#8998ad;font:10px 'IBM Plex Sans',system-ui,sans-serif}.apartment-room-card i{position:absolute;right:8px;top:8px;color:#f0cd6e;font:9px 'IBM Plex Sans',system-ui,sans-serif;font-style:normal}
.apartment-address p{grid-column:1/-1;margin:0;padding-top:9px;border-top:1px solid rgba(126,223,208,.12);color:#91a0b6;font-size:12px;line-height:1.5}
.admin-post-link{color:#7edfd0!important;text-decoration:underline;text-decoration-color:rgba(126,223,208,.42);text-underline-offset:3px;overflow-wrap:anywhere}
.room-progress{margin:14px 0;padding:14px 16px;border:1px solid rgba(166,184,211,.16);border-radius:14px;background:rgba(10,19,35,.56)}
.room-progress-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.room-progress-top div{display:grid;gap:3px}.room-progress-top span{color:#8290a8;font:9px 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.15em}.room-progress-top strong{color:#dbe2eb;font:14px 'Special Elite',monospace}.room-progress-top b{color:#f0cd6e;font:12px 'IBM Plex Sans',system-ui,sans-serif;white-space:nowrap}
.room-progress-track{height:5px;margin:11px 0 10px;overflow:hidden;border-radius:99px;background:#0a1222}.room-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7edfd0,#f0cd6e);box-shadow:0 0 14px rgba(240,205,110,.28)}
.room-keepsakes{display:flex;gap:6px;flex-wrap:wrap}.room-keepsakes span{padding:5px 8px;border:1px solid rgba(154,174,207,.16);border-radius:999px;color:#9facc0;font:10px 'IBM Plex Sans',system-ui,sans-serif}
.room-progress p{margin:10px 0 0;color:#8e9bb0;font:12px/1.5 'IBM Plex Sans',system-ui,sans-serif}

.comment-panel{scroll-margin-top:22px}
.comment-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 10px;
  margin:8px 0 12px;
  border:1px solid rgba(240,205,110,.14);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
.comment-filter-row select{width:auto;max-width:220px;padding:8px 10px}
.comment-options{
  margin:10px 0 0;
  border:1px dashed rgba(240,205,110,.2);
  border-radius:10px;
  padding:9px 11px;
  background:rgba(10,18,35,.5);
}
.comment-options summary{cursor:pointer;color:#a7b2cc;font:13px 'IBM Plex Sans',system-ui,sans-serif}
.comment-options .options-body{display:grid;gap:9px;margin-top:10px}
.comment-options select{max-width:220px;padding:8px 10px}

.entry-share-row{display:flex;justify-content:flex-end;margin-top:12px;position:relative;z-index:2}
.entry-share-row button{padding:7px 10px}
.house-share-compact{margin-left:auto}

.share-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(4,8,18,.82);
  backdrop-filter:blur(7px);
}
.share-sheet{
  width:min(94vw,470px);
  max-height:90dvh;
  overflow:auto;
  padding:20px;
  border:1px solid rgba(240,205,110,.48);
  border-radius:18px;
  background:linear-gradient(180deg,#172442,#0d172d);
  box-shadow:0 26px 80px rgba(0,0,0,.55);
}
.share-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.share-sheet-title{color:#f0cd6e;font:17px 'Special Elite',monospace;line-height:1.35}
.share-sheet-close{border:0;background:transparent;color:#9aa7c0;font-size:22px;cursor:pointer}
.share-sheet-url{margin:9px 0 14px;color:#9aa7c0;font-size:12px;line-height:1.45;word-break:break-all}
.share-sheet-qr{display:flex;justify-content:center;margin:6px 0 16px}
.share-sheet-qr img{width:184px;height:184px;padding:10px;border-radius:16px;background:white}
.share-sheet-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.share-sheet-actions button,.share-sheet-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 10px;
  border:1px solid #344361;
  border-radius:10px;
  background:#121f3b;
  color:#f0cd6e;
  text-decoration:none;
  font:13px 'Special Elite',monospace;
  cursor:pointer;
  text-align:center;
}
.share-sheet-actions .primary{grid-column:1/-1;background:#f0cd6e;color:#101a2e;border-color:#f0cd6e}

.story-paper.share-focus,.venue-paper.share-focus{
  outline:2px solid rgba(126,223,208,.72);
  box-shadow:0 0 0 5px rgba(126,223,208,.1),0 18px 38px rgba(0,0,0,.34);
}

@media(max-width:1100px) and (min-width:821px){
  .city-top-actions .full-label{display:none}
  .city-top-actions .short-label{display:inline}
  .city-top-actions button{padding-inline:9px}
}

@media(max-width:820px){
  .hud .ctl>.subq{display:none!important}
  .city-top-actions{
    top:calc(52px + env(safe-area-inset-top));
    max-width:calc(100vw - 16px);
    gap:4px;
  }
  .city-top-actions button{
    min-height:33px;
    padding:7px 8px;
    border-radius:10px;
    font-size:10px;
    background:rgba(12,22,42,.9);
  }
  .city-top-actions .full-label{display:none}
  .city-top-actions .short-label{display:inline}
  .city-top-actions .search-next{max-width:108px;overflow:hidden;text-overflow:ellipsis}
  body:not(.menu-open) .livebar{top:94px!important;max-width:min(86vw,430px)!important}
  .comment-filter-row{align-items:stretch}
  .comment-filter-row select{width:100%;max-width:none}
  .share-sheet-actions{grid-template-columns:1fr}
  .share-sheet-actions .primary{grid-column:auto}
  .panel{padding-left:12px!important;padding-right:12px!important}
  .house-interior{height:270px;min-height:270px;border-radius:18px}
  .room-plaque{left:12px;top:12px;max-width:72%}
  .room-detail{left:12px;right:auto;top:auto;bottom:12px;max-width:calc(100% - 24px);text-align:left}
  .room-upgrades{left:12px;right:12px;top:72px;bottom:auto;max-width:none}
  .room-upgrades span{padding:4px 7px;font-size:9px}
  .apartment-address{grid-template-columns:1fr;padding:12px}.apartment-unit{text-align:left}.apartment-directory,.apartment-address p{grid-column:1}.apartment-room-grid{grid-template-columns:1fr 1fr}
  .house-content{padding:15px;border-radius:18px}
}

@media(max-width:390px){
  .city-top-actions button{padding-inline:6px;font-size:9px}
  .city-top-actions button span:not(.short-label){display:none}
  .apartment-room-grid{grid-template-columns:1fr}
}