/* A Habbo-inspired client frame. Original graphics stay local and offline-ready. */
:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#11191e;color-scheme:dark}
body{height:100dvh;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
button,input,select{font-family:Arial,Helvetica,sans-serif}
header{position:relative;height:56px;padding:0 18px;gap:18px;background:linear-gradient(#303d45 0,#303d45 48%,#25323a 49%);border-bottom:2px solid #111a20;box-shadow:inset 0 1px #5a6870,0 1px #52606a;z-index:8}
.brand{display:block;width:116px;height:46px;transform:none;flex:none;text-decoration:none;text-shadow:none}
.brand-logo{display:block;width:116px;height:46px;background:url('/assets/ui/habbo-web-sprite.png') -620px -830px;image-rendering:pixelated}
.edition{padding-left:17px;border-left:1px solid #55616a;font:9px Arial;letter-spacing:1px;color:#f3d067;line-height:1.5}
.edition strong{font-size:10px}.edition small{margin-top:1px;color:#a4b2b9;font:8px Arial;letter-spacing:.8px}
.hotel-wallet{height:29px;padding:3px 10px 3px 5px;border:1px solid #111;background:#17222b;box-shadow:inset 0 1px #465661;border-radius:5px;gap:7px;font:11px Arial;color:#f6d069}
.hotel-wallet strong{font:bold 14px Arial;color:#fff0af}.hotel-wallet .coin{display:block;width:26px;height:26px;border:0;border-radius:0;box-shadow:none;background:url('/assets/ui/habbo-web-sprite.png') -889px -834px;image-rendering:pixelated}
.connection{font:10px Arial;color:#b5c4cb;gap:6px}.connection i{width:6px;height:6px;border-radius:0;background:#8fc04b;border:1px solid #b0d869;box-shadow:1px 1px #0f1a1f}
.round{width:25px;height:25px;background:#45545f;border:1px solid #111;border-radius:4px;box-shadow:inset 0 1px #81909a;color:#fff;font:bold 17px Arial}
main{display:block;position:relative;height:calc(100dvh - 56px);min-height:0}
.game{height:100%;min-height:0;min-width:0;background:radial-gradient(ellipse at 50% 52%,#3c4c55,#27353e 65%,#202c34);box-shadow:inset 0 0 0 1px #46535c}
#room{height:100%;width:100%}
.room-heading{top:15px;left:16px;max-width:calc(100% - 220px);padding:9px 13px 10px;background:#19242ddd;border:1px solid #111c23;border-radius:5px;box-shadow:inset 0 1px #4b5b65,0 2px #111a2055;pointer-events:none;z-index:3}
.room-heading .eyebrow{font:bold 8px Arial;letter-spacing:1px;color:#8eabbc}
.room-heading h1{font:bold 15px Arial;letter-spacing:0;margin:5px 0 3px;color:#f5f6f7;text-shadow:1px 1px #111}
.room-heading p{font:10px Arial;color:#a1b1ba;margin:0}
.room-tags{top:105px;left:16px;gap:5px;font:10px Arial;z-index:3}
.room-tags>span{border:1px solid #131e25;border-radius:3px;box-shadow:inset 0 1px #4c5d66;background:#21313bd9;color:#ccd5da;padding:5px 8px}.room-tags .room-welcome{display:none}
#room-settings-button{top:16px;right:16px;z-index:4;padding:7px 10px;border:1px solid #111;border-radius:4px;background:linear-gradient(#e8e8e2 0,#e8e8e2 49%,#c7c7c0 50%);box-shadow:inset 0 1px #fff,0 2px #1116;color:#222;font:bold 10px Arial}
#room-settings-button.lighting-on{background:linear-gradient(#f7db79,#cda94b);color:#3b2a09;border-color:#111}
.rail{position:absolute;left:0;right:0;bottom:0;height:66px;z-index:7;display:flex;flex-direction:row;align-items:stretch;gap:4px;padding:4px 14px;border:0;border-top:2px solid #0a131a;background:linear-gradient(#344b5a 0,#344b5a 48%,#273e4d 49%);box-shadow:inset 0 1px #647b89,0 -1px #536876}
.dock-hotel{align-self:center;width:45px;height:48px;margin-right:11px;border-right:1px solid #182b38;background:url('/assets/ui/habbo-web-sprite.png') -1218px -1140px;image-rendering:pixelated}
.nav{position:relative;width:70px;flex:none;gap:2px;justify-content:center;padding:2px 4px;border:1px solid transparent;border-radius:4px;color:#e1e8ed;font:bold 10px Arial;text-shadow:1px 1px #172530}
.nav:hover,.nav.active{background:#172b38;border-color:#10212d;box-shadow:inset 0 1px #526d7f;color:#ffdf77}.nav.active::after{content:'';position:absolute;bottom:-5px;left:19px;right:19px;height:3px;background:#f4cb53;border-top:1px solid #fff0a1}
.nav b.nav-pixel{display:block;position:relative;width:42px;height:35px;line-height:normal;font-size:0;image-rendering:pixelated;background-repeat:no-repeat}
.nav-admin{color:#ffdf77;font-size:26px!important;line-height:35px!important;text-align:center;text-shadow:1px 1px #172530}.nav-rooms::before{content:'';position:absolute;width:42px;height:52px;left:0;top:-9px;background:url('/assets/ui/habbo-web-sprite.png') -1218px -1140px;transform:scale(.68);image-rendering:pixelated}
.nav-shop::before{content:'';position:absolute;width:128px;height:154px;left:-43px;top:-59px;background:url('/assets/ui/habbo-web-sprite.png') -216px -152px;transform:scale(.24);image-rendering:pixelated}
.nav b.nav-inventory{width:44px;height:41px;margin:-3px 0;background:url('/assets/ui/nav-inventory.png') center/44px 41px no-repeat} /* native size: any scaling distorts the pixel art */
.nav b.nav-avatar{width:32px}.nav-avatar canvas{display:block;image-rendering:pixelated}
.rail-bottom{position:relative;align-self:center;margin-left:auto;margin-top:0;padding:0 3px 0 15px;color:#c5d0d7;font:9px Arial;text-align:right;line-height:1.5}
.rail-bottom strong{font:bold 9px Arial;letter-spacing:.5px;color:#e0e7eb}.rail-bottom small{font:9px Arial;letter-spacing:0;line-height:1.5;color:#91a5b2;margin-top:3px}
.dock-online{position:absolute;left:3px;top:2px;width:6px;height:6px;background:#97bd4c;border:1px solid #c4db87}
#chat{left:16px;right:16px;bottom:80px;height:37px;border:2px solid #111b22;border-radius:6px;background:#fff;box-shadow:inset 0 1px #fff,0 1px #71848f;color:#222;z-index:5}
#chat input{height:100%;padding:0 12px;font:12px Arial;color:#222;background:#fff;border-radius:4px}#chat input::placeholder{color:#929292}#chat:focus-within{outline:1px solid #a7c3d3;outline-offset:1px}
.game-footer{display:none}
#furniture-tools.infostand,#avatar-info.infostand{right:16px;bottom:130px;font-family:Arial,Helvetica,sans-serif}
#placement{bottom:130px;left:16px;right:230px;border:1px solid #111;background:#ecece4;color:#333;border-radius:4px;box-shadow:inset 0 1px #fff;font:11px Arial}
#stand-up{top:145px;left:16px;border:1px solid #111;border-radius:3px;background:#ddd;color:#222;font:bold 10px Arial;padding:6px 10px}
#room-travel{top:145px;left:16px;background:#1e3342;border:1px solid #97aab4;border-radius:4px;color:#ffe28d;font:11px Arial}
dialog{padding:24px;background:#e9e9df;color:#222;border:2px solid #151515;border-radius:7px;box-shadow:inset 0 0 0 1px #fff,4px 5px #0005;font:12px Arial}
dialog::backdrop{background:#0008;backdrop-filter:none}dialog h2{font:bold 21px Arial;color:#222;letter-spacing:0}dialog p,dialog small{color:#666}dialog .eyebrow{color:#367d98}dialog label{color:#333}
dialog input,dialog select{color-scheme:light;background:#fff;color:#222;border:1px solid #888;border-radius:3px;font:12px Arial}
.primary{border:2px solid #173e0b;border-radius:4px;background:linear-gradient(#19b900 0,#19b900 48%,#079600 49%);box-shadow:inset 0 1px #7bd758;color:#fff;font:bold 12px Arial;padding:10px}
.text-button,#cancel-seat-edit{color:#555}
.hotel-window{color-scheme:light}.hotel-titlebar{background:linear-gradient(#438ca6 0,#438ca6 50%,#327b96 51%)}
button:focus-visible{outline:2px solid #90d9ff;outline-offset:2px}
@media(max-width:760px){header{height:50px;padding:0 10px;gap:9px}.brand{width:116px}.edition{display:none}.connection{font-size:9px}.hotel-wallet{margin-left:auto;font-size:10px;padding-right:7px}.hotel-wallet .coin{display:block}.hotel-wallet strong{font-size:12px}.round{width:23px;height:23px}main{height:calc(100dvh - 50px);min-height:0}.game{height:100%;min-height:0}.rail{height:63px;padding:3px 6px;gap:1px}.dock-hotel{display:none}.nav{width:65px;font-size:9px}.rail-bottom strong{display:none}.rail-bottom small{font-size:8px;max-width:105px}.room-heading{left:10px;top:10px;max-width:calc(100% - 150px);padding:8px 10px}.room-heading h1{font-size:12px}.room-heading p{display:none}.room-tags{left:10px;top:77px}#room-settings-button{right:10px;top:10px;max-width:125px;padding:7px;font-size:9px}#chat{left:10px;right:10px;bottom:76px;height:36px}#furniture-tools.infostand,#avatar-info.infostand{right:10px;bottom:124px;max-height:calc(100% - 145px)}#placement{left:10px;right:205px;bottom:124px}#stand-up,#room-travel{left:10px;top:113px}}
@media(max-width:480px){.edition,.rail-bottom,.connection i{display:none}.connection{max-width:72px;line-height:1.3}.hotel-wallet{gap:4px}.room-tags{font-size:9px}.nav{flex:1;width:auto;max-width:80px}.room-heading .eyebrow{font-size:7px}.room-heading{max-width:calc(100% - 148px)}.room-heading h1{line-height:1.25}}

#avatar-menu{padding:0;background:#20333f;border:2px solid #71828b;border-radius:4px;box-shadow:2px 3px #0005;color:#fff;font:12px Arial;overflow:visible}#avatar-menu strong{display:block;padding:9px 10px;border-bottom:1px solid #0f202b;background:#385768;color:#fff;font:bold 12px Arial}#avatar-menu button{width:100%;padding:8px 10px;border-radius:0;color:#fff;font:11px Arial;text-align:left}#avatar-menu button:hover,#avatar-menu button:focus-visible{background:#426577}#avatar-menu:after{background:#20333f;border-color:#71828b}.bubble{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#222;border-color:#333;box-shadow:1px 2px #0005}.bubble::after{background:#fff;border-color:#333}.typing-bubble span{background:#333}.catalog-book{display:block;position:relative;width:43px;height:48px;flex:none;overflow:hidden;font-size:0}.catalog-book::before{content:'';position:absolute;left:-42px;top:-53px;width:128px;height:154px;background:url('/assets/ui/habbo-web-sprite.png') -216px -152px;transform:scale(.31);image-rendering:pixelated}
/* Dialogs use the same blue title bar as the floating hotel windows. */
dialog .eyebrow{display:none}dialog h2{margin:-24px -24px 18px;padding:9px 28px;background:linear-gradient(#438ca6 0,#438ca6 50%,#327b96 51%);color:#fff;border-bottom:1px solid #173e4e;border-radius:4px 4px 0 0;box-shadow:inset 0 1px #80acbc;font:bold 12px Arial;letter-spacing:0;text-align:center;text-shadow:0 1px #215d73}dialog .close{top:5px;right:7px;width:20px;height:20px;background:linear-gradient(#df5c49,#ae2116);color:#fff;border:1px solid #fff;border-radius:3px;box-shadow:0 0 0 1px #61261a;font:bold 20px/15px Arial;padding:0}dialog fieldset{border:1px solid #a6a69c;border-radius:4px;background:#deded5}dialog legend{color:#444;font-weight:bold}dialog input[type=range],dialog input[type=checkbox]{accent-color:#367d98}
/* Navigator and personal room generator. */
.navigator-window{width:430px}.navigator-body{display:flex;flex-direction:column;gap:10px;max-height:calc(100dvh - 100px)}.navigator-top{display:flex;flex-direction:column;gap:9px}.navigator-top .hotel-green{width:100%}.navigator-top input{width:100%}.navigator-rooms{max-height:330px;min-height:70px;overflow:auto;padding:2px}.navigator-room{position:relative;margin-bottom:7px;border:1px solid #999;border-radius:4px;background:#d7d7ce}.navigator-room .room-card{margin:0;border:0!important;border-radius:3px 3px 0 0!important;padding:10px!important}.navigator-room .room-card strong{overflow-wrap:anywhere}.navigator-room.current-room{border-color:#278aa5;box-shadow:inset 0 0 0 1px #80cce1}.navigator-room.current-room .room-card{opacity:1;background:#d7ecec!important}.room-rename{display:block;margin:0 10px 8px;background:transparent;border:0;padding:0;color:#35627a!important;text-decoration:underline;font:10px Arial!important}.navigator-body .hotel-tabs{flex:none}#create-room{width:430px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto}#create-room label,#rename-room label{display:block;font:11px Arial;color:#444}#create-room input,#rename-room input{margin:7px 0 14px}#create-room .layout-controls{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px}.layout-controls select{display:block;width:100%;height:30px;margin-top:6px;font:11px Arial;padding:4px}.layout-preview{position:relative;margin:12px 0;background:#c6d2d6;border:1px solid #8d999e;border-radius:4px;overflow:hidden;text-align:center}.layout-preview canvas{display:block;width:100%;height:190px;object-fit:contain}.layout-preview span{display:block;padding:0 0 8px;font:10px Arial;color:#435a65}#random-layout{width:100%;color:#222;font:11px Arial;background:linear-gradient(#fafaf6,#c7c7c0)}#create-room p{font:11px/1.4 Arial;margin:12px 0}#rename-room{max-width:calc(100vw - 20px)}@media(max-width:480px){.navigator-window{width:calc(100vw - 12px)}.navigator-rooms{max-height:270px}.navigator-body{padding:9px}.layout-preview canvas{height:160px}#create-room{padding:18px}#create-room h2{margin:-18px -18px 14px}.layout-controls select{font-size:10px}}
.nav[hidden]{display:none}
/* Room loading screen */
.game{position:relative}
.room-loading{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#2a4553,#0f1a21);transition:opacity .4s ease;opacity:1}
.room-loading[hidden]{display:none}.room-loading.done{opacity:0;pointer-events:none}
.rl-box{display:flex;flex-direction:column;align-items:center;gap:10px;color:#e1e8ed;font:12px Arial,sans-serif;text-align:center}
.rl-box strong{font:bold 20px Arial;color:#fff;text-shadow:0 2px #0007;max-width:70vw;overflow-wrap:anywhere}.rl-box small{color:#9fb4c0;letter-spacing:.5px}
.rl-tiles{position:relative;width:96px;height:56px}
.rl-tiles i{position:absolute;width:32px;height:16px;background:#c4ad87;border:1px solid #6f5c3a;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:rl-tile 1.2s ease-in-out infinite;opacity:.25}
.rl-tiles i:nth-child(1){left:32px;top:0}.rl-tiles i:nth-child(2){left:16px;top:8px;animation-delay:.15s}.rl-tiles i:nth-child(3){left:48px;top:8px;animation-delay:.3s}.rl-tiles i:nth-child(4){left:32px;top:16px;animation-delay:.45s}
@keyframes rl-tile{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-8px)}}
.rl-bar{width:180px;height:6px;border-radius:3px;background:#ffffff22;overflow:hidden}.rl-bar b{display:block;width:40%;height:100%;border-radius:3px;background:linear-gradient(90deg,#19b900,#7bd758);animation:rl-bar 1.1s ease-in-out infinite}
@keyframes rl-bar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media(prefers-reduced-motion:reduce){.rl-tiles i,.rl-bar b{animation:none;opacity:1}}

#room{touch-action:none;user-select:none;cursor:default}
#room-camera-tools{position:absolute;left:16px;bottom:124px;z-index:3;display:flex;align-items:center;gap:5px;padding:5px;background:#253640dd;border:1px solid #14232b;border-radius:5px;font:11px Arial,sans-serif}
#room-camera-tools button{min-width:27px;min-height:27px;padding:3px 6px;color:#222;font:bold 12px Arial,sans-serif}
#room-camera-tools button.selected{background:#f1d479;box-shadow:inset 0 0 0 2px #9b7026}
#room-player-focus{margin-left:4px}
.home-mode #room-camera-tools{display:none}

#room-camera-panel{display:flex;align-items:center;gap:8px;color:#e9dba7}#room-camera-panel[hidden]{display:none}.camera-anchor{display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}.camera-zoom{display:flex;align-items:center;gap:4px}.camera-zoom input[type=range]{width:90px}.camera-zoom output{min-width:38px;text-align:right}#room-camera-panel:has(#room-zoom-anchor:checked) .camera-zoom input{opacity:.5}#room-camera-toggle[aria-expanded=true]{background:#f1d479;box-shadow:inset 0 0 0 2px #9b7026}
/* Admin always sits at the far right of the toolbar, after items added by scripts. */
.rail #nav-admin{order:99}