/* Habblet section: a display case for hotel pixel art. Brand tokens come from the site theme. */
#portal-content{--hb-accent:var(--brand,var(--accent,#ed94e8));--hb-surface:#12152b;--hb-raised:#1a1d38;--hb-line:#2c2d4b;--hb-muted:#a9a6c4;--hb-ease:cubic-bezier(.16,1,.3,1)}
.hb-subnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 28px;padding:4px;border:1px solid #2c2d4b;border-radius:14px;background:#0d1024;width:max-content;max-width:100%}
.hb-subnav::-webkit-scrollbar{display:none}
.hb-subnav a{flex:none;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:800;color:#b9b6d2;text-decoration:none;transition:background .2s,color .2s}
.hb-subnav a:hover{color:#fff;background:#1a1d38}
.hb-subnav a[aria-current=page]{color:#0b0d1f;background:var(--hb-accent)}
.hb-head{margin:0 0 26px;max-width:760px}
.hb-head h1{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-1.4px;margin:0 0 12px}
.hb-head p{color:var(--hb-muted);font-size:17px;line-height:1.6;margin:0;max-width:62ch}
.hb-credit{color:#8f8cab;font-size:13px;margin:36px 0 0}
.hb-empty{padding:28px;border:1px dashed #3a3a5c;border-radius:16px;color:#b6b3cf;line-height:1.6;background:#0e1126}
.hb-muted{color:var(--hb-muted)}

/* Hub */
.hb-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;margin-bottom:28px}
.hb-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-2px;margin:0 0 16px}
.hb-hero p{color:var(--hb-muted);font-size:18px;line-height:1.6;max-width:44ch;margin:0 0 24px}
.hb-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hb-hero-case{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:22px;border-radius:20px;background:radial-gradient(120% 90% at 20% 0,#2a1c45 0,#12152b 60%);border:1px solid #3a2d58;box-shadow:inset 0 1px 0 #ffffff12,0 30px 60px -30px #000c;min-height:200px}
.hb-hero-case img{width:100%;max-width:48px;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;justify-self:center;filter:drop-shadow(0 4px 0 #0007)}
.hb-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(132px,auto);gap:14px}
.hb-cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:22px;border-radius:16px;background:var(--hb-surface);border:1px solid var(--hb-line);color:inherit;text-decoration:none;overflow:hidden;transition:transform .35s var(--hb-ease),border-color .25s}
.hb-cell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--hb-accent) 55%,#2c2d4b)}
.hb-cell:active{transform:translateY(-1px) scale(.99)}
.hb-cell strong{font-size:30px;letter-spacing:-1px;line-height:1}
.hb-cell span{color:var(--hb-muted);font-size:14px;line-height:1.45}
.hb-cell em{font-style:normal;font-size:13px;font-weight:800;color:var(--hb-accent);margin-top:6px}
.hb-cell-badges{grid-column:span 2;grid-row:span 2;background:radial-gradient(90% 80% at 100% 0,#3b2257 0,transparent 60%),var(--hb-surface)}
.hb-cell-badges strong{font-size:clamp(44px,5vw,68px);letter-spacing:-3px}
.hb-cell-furni{grid-column:span 2}
.hb-icon-row{display:flex;gap:6px;margin-bottom:auto;overflow:hidden;mask-image:linear-gradient(90deg,#000 70%,transparent)}
.hb-icon-row img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;flex:none}
.hb-cell-commands{grid-column:span 2;background:#0b0e1f}
.hb-cell-commands code{font:700 22px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--hb-accent);margin-bottom:auto}
.hb-cell-vip{background:linear-gradient(150deg,#3a2a12,#14152b 70%);border-color:#5b4520}
.hb-cell-vip strong{color:#ffd27a}

/* Catalog */
.hb-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0 0 22px}
.hb-search label{display:grid;gap:6px;font-size:13px;font-weight:800;color:#cfcbe6}
.hb-search-field{flex:1 1 280px}
.hb-search input[type=search],.hb-search select{min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid #3a3a5c;background:#0d1024;color:#f3f1ff;font:inherit;font-weight:600}
.hb-search input[type=search]:focus-visible,.hb-search select:focus-visible{outline:3px solid var(--hb-accent);outline-offset:2px}
.hb-search input::placeholder{color:#8a87a6}
.hb-check{display:flex!important;grid-auto-flow:column;align-items:center;gap:8px!important;min-height:46px}
.hb-catalog{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.hb-results[aria-busy=true]{opacity:.55;transition:opacity .2s}
.hb-count{margin:0 0 12px;color:var(--hb-muted);font-size:14px;font-weight:700;min-height:20px}
.hb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.hb-grid-furni{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.hb-grid li{animation:hb-rise .5s var(--hb-ease) both;animation-delay:calc(var(--i,0) * 18ms)}
.hb-tile{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border-radius:12px;border:1px solid #23253f;background:radial-gradient(70% 70% at 50% 35%,#1d2142 0,#11142a 75%);cursor:pointer;transition:transform .3s var(--hb-ease),border-color .2s,background .2s}
.hb-tile img{position:absolute;inset:0;margin:auto;max-width:70%;max-height:70%;object-fit:contain;image-rendering:pixelated;transition:transform .35s var(--hb-ease);filter:drop-shadow(0 3px 0 #0008)}
.hb-tile:hover,.hb-tile:focus-visible{border-color:color-mix(in srgb,var(--hb-accent) 60%,#23253f);background:radial-gradient(70% 70% at 50% 35%,#2b2350 0,#14162e 75%)}
.hb-tile:hover img,.hb-tile:focus-visible img{transform:translateY(-4px) scale(1.12)}
.hb-tile:active{transform:scale(.96)}
.hb-tile:focus-visible{outline:3px solid var(--hb-accent);outline-offset:2px}
.hb-tile[aria-pressed=true]{border-color:var(--hb-accent);box-shadow:inset 0 0 0 1px var(--hb-accent)}
.hb-tile.is-new::after{content:'';position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:2px;background:#7cf0b8}
.hb-tip{position:absolute;left:50%;bottom:calc(100% + 6px);z-index:3;width:max-content;max-width:200px;padding:7px 10px;border-radius:9px;background:#f4f1ff;color:#14152b;font-size:12px;font-weight:800;line-height:1.3;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity .15s,transform .2s var(--hb-ease)}
.hb-tile:hover .hb-tip,.hb-tile:focus-visible .hb-tip{opacity:1;transform:translate(-50%,0)}
.hb-inspect{position:sticky;top:20px;padding:22px;border-radius:18px;border:1px solid #33305a;background:linear-gradient(180deg,#191b39,#101329);display:grid;gap:12px;animation:hb-fade .35s var(--hb-ease)}
.hb-inspect-stage{display:grid;place-items:center;height:150px;border-radius:14px;background:repeating-conic-gradient(#171a34 0 25%,#13162d 0 50%) 0 0/16px 16px;border:1px solid #262947}
.hb-inspect-stage img{width:auto;height:auto;max-width:120px;max-height:120px;min-width:80px;object-fit:contain;image-rendering:pixelated;animation:hb-bob 2.8s ease-in-out infinite}
.hb-inspect h2{font-size:21px;line-height:1.25;margin:0;overflow-wrap:anywhere}
.hb-inspect p{margin:0;color:#c2bfdb;line-height:1.55;font-size:14px}
.hb-inspect dl{display:grid;gap:10px;margin:4px 0 0}
.hb-inspect dl div{display:grid;gap:3px}
.hb-inspect dt{font-size:12px;color:#8f8cab;font-weight:800}
.hb-inspect dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hb-inspect code{font:700 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f4f1ff;overflow-wrap:anywhere}
.hb-new{justify-self:start;padding:4px 9px;border-radius:7px;background:#163a2c;color:#7cf0b8;font-size:12px;font-weight:900}
.hb-copy{border:1px solid #3a3a5c;background:#0d1024;color:#e9e6ff;border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.hb-copy:hover{border-color:var(--hb-accent)}
[data-copied].hb-copy,[data-copied].hb-key{border-color:#7cf0b8}
.hb-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:22px 0 0;color:var(--hb-muted);font-size:14px;font-weight:700}
.hb-pager a{justify-self:start;padding:10px 16px;border-radius:10px;border:1px solid #3a3a5c;color:#f0edff;text-decoration:none}
.hb-pager a[rel=next]{justify-self:end}
.hb-pager a:hover{border-color:var(--hb-accent)}

/* Commands */
.hb-command-groups{columns:2 420px;column-gap:20px}
.hb-command-group{break-inside:avoid;margin:0 0 20px;padding:20px;border-radius:16px;background:var(--hb-surface,#12152b);border:1px solid var(--hb-line,#2c2d4b)}
.hb-command-group h2{font-size:18px;margin:0 0 12px}
.hb-command-group ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hb-command-group li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 0}
.hb-command-group li p{margin:0;font-size:14px;line-height:1.45;color:#d6d3ec}
.hb-command-group li small{display:block;color:#8f8cab;font-size:12px}
.hb-key{border:1px solid #3a3a5c;border-bottom-width:3px;background:#0b0e1f;border-radius:9px;padding:6px 10px;cursor:pointer;transition:transform .12s,border-color .2s}
.hb-key code{font:700 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--brand,var(--accent,#ed94e8))}
.hb-key:hover{border-color:var(--brand,var(--accent,#ed94e8))}
.hb-key:active{transform:translateY(2px);border-bottom-width:1px}
.hb-vip{display:inline-block;padding:2px 7px;border-radius:6px;background:#3a2a12;color:#ffd27a;font-size:11px;font-weight:900;vertical-align:middle}

/* Staff */
.hb-staff-group{margin:0 0 30px}
.hb-staff-group h2{font-size:20px;margin:0 0 14px}
.hb-staff{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hb-staff li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:end;padding:16px 16px 16px 10px;border-radius:16px;background:linear-gradient(180deg,#171a35,#11142a);border:1px solid var(--hb-line,#2c2d4b);animation:hb-rise .5s var(--hb-ease,ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.hb-staff-avatar{height:110px;display:grid;place-items:end center;overflow:hidden}
.hb-staff-avatar img{max-height:110px;width:auto;image-rendering:pixelated;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hb-staff li:hover .hb-staff-avatar img{transform:translateY(-4px)}
.hb-staff h3{margin:0 0 3px;font-size:17px;overflow-wrap:anywhere}
.hb-staff p{margin:0;color:#b9b6d2;font-size:14px}
.hb-staff q{display:block;margin-top:8px;color:#8f8cab;font-size:13px;line-height:1.4;quotes:none;overflow-wrap:anywhere}
.hb-staff-badge{position:absolute;top:12px;right:12px;image-rendering:pixelated}

/* Fansites */
.hb-fansites{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.hb-fansites li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;padding:20px;border-radius:16px;background:var(--hb-surface,#12152b);border:1px solid var(--hb-line,#2c2d4b);animation:hb-rise .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.hb-fansites img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;background:#0c0f22;border-radius:12px;padding:8px}
.hb-fansites h2{font-size:18px;margin:0 0 4px}
.hb-fansites p{margin:0 0 6px;color:#b9b6d2;font-size:14px}
.hb-fansites a{font-weight:800;font-size:14px;color:var(--brand,var(--accent,#ed94e8))}

/* Text pages */
.hb-pages{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.hb-pages>div:only-child{grid-column:1/-1}
.hb-toc{position:sticky;top:20px;display:grid;gap:4px;padding:12px;border-left:2px solid #2c2d4b}
.hb-toc a{color:#b9b6d2;text-decoration:none;font-weight:700;font-size:14px;padding:6px 8px;border-radius:8px}
.hb-toc a:hover{color:#fff;background:#1a1d38}
.hb-text{max-width:72ch;margin:0 0 34px;scroll-margin-top:20px}
.hb-text h2{margin-top:0}

@keyframes hb-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes hb-fade{from{opacity:0;transform:translateY(6px)}}
@keyframes hb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:900px){.hb-hero{grid-template-columns:1fr}.hb-hero-case{grid-template-columns:repeat(6,1fr);min-height:0}.hb-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-cell-badges{grid-row:auto}.hb-catalog{grid-template-columns:1fr}.hb-inspect{position:static}.hb-pages{grid-template-columns:1fr}.hb-toc{position:static;display:flex;flex-wrap:wrap;border-left:0;padding:0}}
@media(max-width:560px){.hb-bento{grid-template-columns:1fr}.hb-cell-badges,.hb-cell-furni,.hb-cell-commands{grid-column:auto}.hb-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.hb-command-group li{grid-template-columns:auto minmax(0,1fr)}.hb-command-group li .hb-vip{grid-column:2}.hb-pager{grid-template-columns:1fr 1fr}.hb-pager>span:not(:empty){grid-column:1/-1;grid-row:1;text-align:center}}
@media(prefers-reduced-motion:reduce){.hb-grid li,.hb-staff li,.hb-fansites li,.hb-inspect,.hb-inspect-stage img{animation:none}.hb-tile,.hb-tile img,.hb-cell,.hb-tip,.hb-staff-avatar img{transition:none}.hb-tile:hover img{transform:none}}

.hb-missing{visibility:hidden}.hb-tile:has(.hb-missing)::after,.hb-inspect-stage:has(.hb-missing)::after{content:'?';position:absolute;inset:0;display:grid;place-items:center;color:#6d6a90;font-weight:800;font-size:20px}.hb-tile,.hb-inspect-stage{position:relative}