:root{--loop-ink:#192a33;--loop-paper:#f6e8cc;--loop-orange:#ff925e;--loop-teal:#84b9aa}
#screen-auth{background:#1d2f38;color:var(--loop-paper);align-items:flex-start;overscroll-behavior:contain}
#screen-auth::before,#screen-auth::after{display:none}
.door-shell{width:min(1500px,100%);padding:0 clamp(22px,5vw,86px);margin:auto;min-width:0}
.door-top,.door-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0;border-bottom:1px solid #f6e8cc35}
.door-brand{display:flex;gap:11px;align-items:center;color:inherit;text-decoration:none;font-size:33px;font-weight:900;letter-spacing:-.085em;line-height:1}.door-brand img{width:40px;height:40px}.door-brand span span{color:var(--loop-orange)}
.door-edition,.door-kicker,.door-footer,.club-cover figcaption{font:700 10px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.12em}
.door-edition,.door-footer{color:#b0c9c1}
.door-grid{display:grid;grid-template-columns:minmax(0,1.63fr) minmax(300px,1fr);gap:clamp(26px,4vw,66px);align-items:center;padding:clamp(26px,4vw,56px) 0}
.door-world{min-width:0}.door-copy .door-kicker{color:#9fcebf}.door-copy h1{font-size:clamp(48px,6.2vw,98px);font-weight:900;letter-spacing:-.045em;line-height:.91;margin:12px 0 17px}.door-copy em{font-style:normal;color:var(--loop-orange)}.door-copy p{margin:0 0 24px;color:#dce5d7;line-height:1.6;font-size:clamp(14px,1.35vw,18px)}
.club-cover{margin:0;border:1px solid #f6e8cc50;background:radial-gradient(circle at 65% 30%,#d87b53,#30545b 55%,#1a2937);overflow:hidden;border-radius:18px 18px 6px 6px}.club-cover img{display:block;width:100%;height:auto;aspect-ratio:1.72;object-fit:cover}.club-cover figcaption{display:flex;justify-content:space-between;gap:10px;padding:13px 15px;color:#e8dabb;background:#17262d}
.door-entry{background:var(--loop-paper);color:var(--loop-ink);padding:clamp(19px,3vw,39px);border-radius:7px 26px 7px 7px;box-shadow:8px 8px 0 #13242a;min-width:0}.door-entry-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.auth-stats{color:#365e56;font-size:11px;font-weight:750}.auth-stats:empty{display:none}.door-entry h2{font-size:clamp(30px,4vw,54px);letter-spacing:-.075em;line-height:1;margin:13px 0 21px}
#screen-auth .auth-card{background:transparent;color:inherit;padding:0;box-shadow:none;border:0;border-radius:0}.door-entry .auth-tabs{display:flex;gap:0;margin-bottom:15px;border-bottom:1px solid #6d7c755c}.door-entry .auth-tabs button,.door-entry .auth-tabs button.active{flex:1;background:none;color:var(--loop-ink);border:0;border-radius:0;box-shadow:none;padding:10px 4px;font-weight:750}.door-entry .auth-tabs button.active{box-shadow:inset 0 -3px #a84a2b}.door-entry .fld{color:var(--loop-ink);font-size:12px;gap:6px;margin:11px 0}.door-entry .fld input:not([type=color]):not([type=range]):not([type=checkbox]){background:#fff9ea;border:1px solid #9b9d88;border-radius:6px;color:var(--loop-ink);min-height:42px;padding:9px 11px}.door-entry .auth-err{color:#a02625;min-height:0;margin:0}.door-entry .auth-err:not(:empty){margin:10px 0}.door-entry .auth-card .btn.hot{margin-top:10px;background:var(--loop-ink);color:var(--loop-paper);box-shadow:none;border:0;border-radius:6px;min-height:47px;font-size:15px}
.soundcheck{border-top:1px dashed #838d7c;margin-top:24px;padding-top:19px;display:grid;grid-template-columns:1fr auto;gap:9px 12px;align-items:center}.soundcheck .door-kicker{color:#52665b}.soundcheck h3{margin:4px 0 0;font-size:16px;letter-spacing:-.02em}.sound-play{width:43px;height:43px;background:var(--loop-orange);color:var(--loop-ink);border:2px solid var(--loop-ink);border-radius:50%;font-weight:900}.is-playing .sound-play{background:var(--loop-teal)}.sound-layers{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}.sound-layers button{border:1px solid #647970;border-radius:99px;padding:6px 9px;background:transparent;color:var(--loop-ink);font-size:11px;font-weight:750}.sound-layers button[aria-pressed=true]{background:#cae1ce;border-color:#668271}.sound-status{grid-column:1/-1;font-size:11px;color:#52665b}
.door-footer{border-bottom:0;border-top:1px solid #f6e8cc35;padding:15px 0 19px}.biitsi-logo{display:flex;gap:8px;align-items:center}.biitsi-logo img{width:30px;height:30px}#app #top,#app #toolbar{background:#20333d;border-color:#617d76}#app #top .logo,.cr-wrap .logo{color:#ffb480;font-family:system-ui,sans-serif;font-weight:950;letter-spacing:-.07em;text-shadow:none}#app #toolbar button.active{color:#ffe3ba;border-color:#ff925e}
#screen-auth :focus-visible,#app :focus-visible{outline:2px solid #ac4e2f;outline-offset:3px}#app :focus-visible{outline-color:#f5a776}
@media(max-width:760px){.door-grid{grid-template-columns:1fr;gap:22px;padding:24px 0}.door-shell{margin:0 auto}.door-top{padding:13px 0}.door-copy h1{font-size:clamp(39px,9vw,62px);margin:9px 0 12px}.door-copy p{margin-bottom:15px}.club-cover img{aspect-ratio:2.05}.door-entry{padding:20px}.door-entry h2{margin-bottom:12px}.door-footer{font-size:9px}}
@media(max-width:360px){.door-shell{padding-inline:15px}.door-edition,.club-cover figcaption{font-size:8px;letter-spacing:.07em}.door-entry{padding:16px}}

body{font-family:Manrope,system-ui,sans-serif}.door-copy h1,.door-entry h2,.door-brand,.showroom h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;letter-spacing:-.04em}.club-cover figcaption{align-items:center}.club-cover figcaption button{border:0;background:none;padding:5px 0;color:#ffb889;font:inherit;text-align:right}.showroom{width:min(690px,calc(100% - 22px));max-height:94dvh;padding:24px;border:1px solid #a39070;border-radius:16px;background:#f6e8cc;color:#192a33;box-shadow:0 22px 80px #0d171dbb}.showroom::backdrop{background:#102029ca}.showroom-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.showroom h2{font-size:40px;margin:5px 0 14px}.showroom-close{width:41px;height:41px;border:1px solid #536a63;border-radius:50%;background:none;font-size:23px}.showroom canvas{width:100%;height:clamp(210px,41vh,330px);display:block;background:#243944;border-radius:10px}.showroom-controls{display:flex;align-items:end;flex-wrap:wrap;gap:8px;margin-top:15px}.showroom-controls label{display:grid;gap:3px;font-size:11px;font-weight:800}.showroom-controls :is(button,select){min-height:38px;border:1px solid #668271;border-radius:6px;padding:5px 9px;background:#fff8e8;color:#192a33;font-weight:750}@media(max-width:470px){.showroom{padding:14px}.showroom h2{font-size:32px}.showroom-controls label{flex:1 1 100px}.showroom-controls select{width:100%}}
/* The club's in-game palette and navigation */
#screen-auth { background: radial-gradient(ellipse at 16% 1%, #3a444c, transparent 48%), #14252e; }
.door-top { padding-block: 14px; }
.door-jump { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #9b855d; border-radius: 8px; color: #ffe6bf; text-decoration: none; font-weight: 800; }
.door-jump:hover { background: #ffd39d; color: #192a33; }
.door-grid { grid-template-columns: minmax(0, 1.72fr) minmax(300px, 1fr); gap: clamp(16px, 3vw, 48px); }
.door-world { display: grid; isolation: isolate; }
.door-copy, .club-cover { grid-area: 1 / 1; }
.door-copy { align-self: end; z-index: 1; margin-bottom: 56px; padding: clamp(17px, 3vw, 42px); pointer-events: none; }
.door-copy h1 { font-size: clamp(38px, 5vw, 75px); margin: 0 0 12px; line-height: .96; text-shadow: 0 3px 16px #07121dd9; }
.door-copy em { color: #ffc48f; }
.door-copy p { max-width: 34ch; margin: 0; color: #faf0de; text-shadow: 0 1px 7px #101927; }
.club-cover { position: relative; border-radius: 20px; border-color: #a88b5f; box-shadow: 0 20px 50px #070f1657; }
.club-cover img { aspect-ratio: 1.48; object-position: 56% 50%; }
.club-cover::after { content: ''; position: absolute; inset: 0 0 54px; background: linear-gradient(0deg, #101c2afc, #101c2aaf 35%, transparent 74%); pointer-events: none; }
.club-cover figcaption { position: relative; z-index: 1; justify-content: flex-end; min-height: 54px; padding: 3px 17px; background: #152430; border-top: 1px solid #a88b5f65; }
.club-cover figcaption button { min-height: 44px; color: #ffddb5; letter-spacing: normal; font: 800 13px/1.3 Manrope, sans-serif; }
.club-cover figcaption button:hover { text-decoration: underline; text-underline-offset: 4px; }
.door-entry { border: 1px solid #c6ad86; border-radius: 18px; background: linear-gradient(160deg, #fff2d9, #e8d6b7); box-shadow: 0 18px 45px #080e153b; }
.door-entry-head { min-height: 18px; }
.door-entry-head .auth-stats { margin-left: auto; }
.door-entry-head #doorBeta { border-radius: 999px; padding: 4px 8px; background: #e4cda5; color: #4e3623; letter-spacing: .04em; }
.door-entry .auth-card .btn.hot:hover { background: #2b4144; }
@media (max-width: 760px) {
  .door-grid { grid-template-columns: 1fr; gap: 16px; }
  .club-cover img { aspect-ratio: 1.66; min-height: 215px; }
  .door-copy { padding: 14px 16px; }
  .door-copy h1 { font-size: clamp(34px, 7.7vw, 58px); margin-bottom: 7px; }
  .door-copy p { font-size: 13px; }
}
#app #top, #app #toolbar { background: #17272e; border-color: #3d565a; box-shadow: none; }
#app #toolbar button.active { background: #ffab78; color: #17272e; box-shadow: none; }
#app #toolbar button.active span { color: #17272e; }
#app #toolbar button.active::after { display: none; }
#app .stage { background: radial-gradient(ellipse at 52% 39%, #3b5e62, #243a43 46%, #142129 83%); }
#app .stage[data-scene]:not([data-scene=""]) {
  background:
    linear-gradient(0deg, #0c191fe8, #0f202575 36%, #0f202526 75%),
    radial-gradient(ellipse at 50% 53%, #10232a51 27%, transparent 70%),
    var(--scene-art) center 45% / cover no-repeat,
    #18292e;
}
#app .stage[data-scene="terrace"] {
  background-position: center, center, 60% 37%, center;
}
#app .stage:is([data-scene="hall"], [data-scene="bunker"], [data-scene="arcade"]) {
  background:
    linear-gradient(0deg, #071724d9, #11253442 50%, #0717240d 90%),
    var(--scene-art) center 32% / cover no-repeat,
    #101e2d;
}
#app .stage[data-scene="arcade"] #roomInfo {
  background: linear-gradient(150deg, #362641, #1d263b);
  border-color: #b78fab; color: #fff0d7;
}
#app .stage[data-scene="arcade"] #roomInfo .ri-name { color: #ffdfab; }
#app .stage[data-scene="arcade"] #roomInfo :is(.ri-meta, .ri-desc) { color: #e1cbdf; }
#app .stage[data-scene="arcade"] #riArcade {
  border-color: #d98e9e; background: #ffceaa; color: #3f273a; box-shadow: none;
}
#app .stage[data-scene="pool"] {
  background:
    linear-gradient(0deg, #071b2ded, #091f364d 45%, transparent 80%),
    var(--scene-art) 75% top / cover no-repeat,
    #081d34;
}
#app .stage[data-scene]:not([data-scene=""])::after {
  background: radial-gradient(ellipse at 51% 46%, transparent 58%, #09141959 100%);
}
#app #view-room .stage[data-scene="lobby"] {
  background:
    linear-gradient(0deg, #102125c4, #1021253d 35%, transparent 73%),
    var(--scene-art) center 36% / cover no-repeat,
    #24434a;
}
#app #view-room .stage[data-scene="lobby"]::after {
  background: radial-gradient(ellipse at 50% 42%, transparent 50%, #10212545 100%);
}
@media (max-width: 700px) {
  #app #view-room .stage[data-scene="lobby"] { background-position: center, 75% top, center; }
}
#app #where { color: #bccec9; }
.staff-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline: 4px;
  color: #ffe0a5;
  font: 900 10px/1.2 Manrope, system-ui, sans-serif;
  letter-spacing: .13em;
  vertical-align: middle;
  white-space: nowrap;
}
.staff-mark[hidden] { display: none; }
.staff-mod {
  padding: 3px 5px;
  border: 1px solid #ff9ca4;
  border-radius: 4px;
  color: #ffb3b9;
  background: #591d2b;
}
.staff-owner {
  padding: 3px 5px;
  border-block: 1px solid #dcaa655e;
  color: #ffde9e;
  font: italic 700 14px/1.15 Georgia, serif;
  letter-spacing: .035em;
  text-shadow: 0 1px 5px #eab56266;
}
.staff-owner::before, .staff-owner::after {
  content: '';
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: #e7b565;
}
#app #userChip.is-admin, .profile-card.is-admin, .win .ach.admin-ach.on {
  background: linear-gradient(118deg, #8c2c40, #49182b 86%);
  border-color: #e18c94;
  color: #fff3eb;
  box-shadow: inset 0 1px 0 #ffdec23d, 0 3px 10px #3d101d55;
}
.profile-card.is-owner,
#app #userChip.is-owner {
  background: linear-gradient(125deg, #782039, #3e1028 65%, #260c1c);
  border-color: #f3c47e;
  box-shadow: inset 0 0 0 2px #f3c47e40, 0 3px 14px #180d1b80;
}
.owner-affiliation { margin: 0 0 7px; color: #ffda9a; font-size: 11px; font-weight: 800; }
#app #userChip.is-admin:hover { border-color: #ffcf9a; }
#app #userChip.is-admin #userLvl { display: none; }
.profile-card.is-admin { align-items: center; }
.profile-card.is-admin { border: 1px solid; border-color: #e18c94; border-radius: 11px; padding: 9px; }
.profile-card.is-owner { border-color: #f3c47e; }
.win .ach.admin-ach.on { border: 1px solid #e18c94; }
/* Player and furniture cards */
#infostand {
  position: absolute;
  right: clamp(8px, 1.1vw, 18px);
  bottom: clamp(8px, 1.1vw, 18px);
  width: min(calc(100% - 16px), clamp(238px, 23vw, 292px));
  max-height: min(66%, 360px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(9px, 1.1vw, 15px);
  border: 1px solid #b29d77;
  border-radius: 12px;
  background: linear-gradient(150deg, #fff4de, #e8e3d0);
  color: #213932;
  box-shadow: 0 6px 26px #0c191bc2;
}
#infostand[hidden] { display: none; }
#infostand.is-admin {
  --role-ink: #ffd2c8;
  --role-edge: #e59d91;
  --role-banner: #8a2636;
  background: linear-gradient(145deg, #731c2d, #3c0f1d);
  border-color: var(--role-edge);
  color: #fff2dd;
}
#infostand.is-owner {
  --role-ink: #ffe6ae;
  --role-edge: #f3c47e;
  --role-banner: #9b2537;
  background: linear-gradient(155deg, #851c2d, #540f21 62%, #330d19);
  box-shadow: inset 0 0 0 3px #4e1522, inset 0 0 0 4px #e3ae6885, 0 6px 26px #0c191bc2;
}
#infostand.is-mod {
  --role-ink: #ffe5b7;
  --role-edge: #fbb56b;
  --role-banner: #a3451c;
  background: linear-gradient(145deg, #9a411c, #5c250e 75%);
  border-color: var(--role-edge);
  color: #fff1d5;
}
#infostand .is-role-banner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
  margin-bottom: 10px;
  padding: 5px 25px 5px 6px;
  border: 1px solid var(--role-edge);
  border-radius: 8px;
  background: linear-gradient(120deg, var(--role-banner), #2d1219);
  color: var(--role-ink);
}
#infostand .is-role-banner strong {
  display: block;
  font: 850 clamp(13px, 1.35vw, 18px)/1.08 'Bricolage Grotesque', Manrope, sans-serif;
  letter-spacing: .025em;
}
#infostand .is-role-banner small { display: block; margin-top: 3px; color: #fff0db; }
#infostand.is-mod .is-role-banner { background: linear-gradient(120deg, var(--role-banner), #64260e); }
#infostand.is-staff .is-x { top: 4px; right: 4px; min-width: 27px; min-height: 27px; background: #29131ce0; }
#infostand.is-staff .is-info { padding-right: 0; }
#infostand.is-staff :is(.muted, .is-kicker) { color: var(--role-ink); }
#infostand.is-mod #isAv { border-color: var(--role-edge); background: radial-gradient(ellipse at 50% 85%, #ffc784, transparent 48%), linear-gradient(#60290e, #ae5427); }
#infostand.is-mod .is-actions .btn:is(.hot, [data-a="profile"]) {
  background: #ffbe79; color: #47210e; border-color: #f3a364;
}
#infostand.is-owner #isAv, .profile-card.is-owner #pfAv {
  border-color: #f3c47e;
  background: radial-gradient(ellipse at 50% 80%, #f7cc855c, transparent 52%), linear-gradient(90deg, #481024, #9b4353 48%, #4e1128);
  box-shadow: inset 0 0 0 2px #ffda8a53;
}
#infostand.is-owner .is-kicker { color: #ffce86; }
#infostand.is-owner .is-name { color: #fff0c9; font: 800 clamp(23px, 2.5vw, 32px)/1 'Bricolage Grotesque', sans-serif; }
#infostand.is-pet #isPet {
  width: 78px; height: 58px; border: 1px solid #a39d74; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 78%, #8ea78f, transparent 45%), linear-gradient(#f7e6bd, #b5cdb0);
}
#infostand .is-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  border: 1px solid #ac9a772e;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
}
#infostand .is-x:hover { background: #bb915e24; }
#infostand .is-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 1vw, 13px); }
#infostand :is(#isAv, #isFurni) {
  display: block;
  width: clamp(57px, 5.4vw, 81px);
  height: clamp(68px, 6.5vw, 96px);
  border: 1px solid #8a9580;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 88%, #8f8f6880 0 21%, transparent 23%), radial-gradient(ellipse at 50% 12%, #f1e9cb, #a9c2b4 90%);
}
#infostand.is-admin:not(.is-owner) #isAv { border-color: #a98966; }
#infostand .is-info { display: grid; gap: 3px; min-width: 0; padding: 1px 22px 1px 0; overflow-wrap: anywhere; }
#infostand .is-kicker { color: #526a60; font: 800 9px/1.2 Manrope, sans-serif; text-transform: uppercase; letter-spacing: .13em; }
#infostand.is-admin .is-kicker { color: #e7bcad; }
#infostand .is-name { font: 900 clamp(15px, 1.4vw, 19px)/1.15 Manrope, sans-serif; }
#infostand .is-motto { font-size: 11px; font-style: italic; }
#infostand .is-motto:empty, #infostand .is-badges:empty { display: none; }
#infostand small { font-size: 11px; line-height: 1.35; }
#infostand .muted { color: #49645b; }
#infostand .is-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
#infostand .is-actions .btn {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 4px 7px;
  border: 1px solid #9eab90;
  border-radius: 6px;
  box-shadow: none;
  background: #fcf6e8;
  color: #26463c;
  font: 800 11px/1.2 Manrope, sans-serif;
  white-space: normal;
}
#infostand .is-actions .btn:hover { background: #d8e6d6; }
#infostand .is-actions .btn:is(.hot, [data-a="dance"], [data-a="profile"]) { background: #30594d; color: #fff2d8; border-color: #6b8c77; }
#infostand.is-admin .is-actions .btn:is(.hot, [data-a="dance"], [data-a="profile"]) { background: #f3d097; color: #402637; border-color: #edbd83; }
#infostand .is-actions .btn.danger { background: #732c39; color: #fff2e7; border-color: #a56063; }
#infostand .is-more { margin-top: 7px; padding-top: 6px; border-top: 1px solid #a0916d55; font-size: 11px; }
#infostand .is-more summary { cursor: pointer; font-weight: 800; }
.profile-card > div { min-width: 0; overflow-wrap: anywhere; }
.profile-card h3 { margin-block: 0 6px; }
.profile-card #pfAv { width: clamp(64px, 15vw, 96px); height: clamp(88px, 22vw, 124px); border: 1px solid #a2997b; background: radial-gradient(ellipse at 50% 90%, #8f8f6880 0 21%, transparent 23%), linear-gradient(#f1e9cb, #a9c2b4); }
@media (max-width: 700px) {
  #infostand { max-height: min(54%, 290px); }
  #infostand .is-actions .btn { min-height: 34px; }
}
#app .zoom button {
  background: #223834f2;
  border: 1px solid #a18d68;
  color: #fff0c9;
  box-shadow: 0 2px 8px #101b1aa0;
}
#app .zoom button:hover { background: #36534a; }
#app #dbBox { background: #392e24; color: #ffdb93; border: 1px solid #c6a470; }
#app #voteBar { width: max-content; max-width: calc(100% - 16px); gap: 6px; border-color: #557369; background: #1a3034; color: #fff0d9; }
#app #voteBar > span { min-width: 0; color: #dce4dc; }
#app #voteBar button { flex-shrink: 0; display: flex; align-items: center; gap: 4px; width: auto; min-width: 43px; padding: 0 7px; background: #263f41; border: 1px solid #648578; color: #d4f3dc; font-size: 16px; }
#app #voteBar button.down { color: #ffc6cf; }
#app #voteBar button small { font-size: 11px; font-weight: 800; white-space: nowrap; }
#app #voteBar button small:empty { display: none; }
#app #chatInput { background: #fff5dd; color: #243b37; }
#app .win { border-color: #23403d; }
#app .win-head {
  background: linear-gradient(100deg, #254340, #23353c);
  color: #ffe9c1;
  border-bottom: 1px solid #a68c64;
}
#app .win .navrow, #app .win .scard { background: #faf3e2; color: #253d36; border-color: #c6b995; }
#app .win .navrow:hover, #app .win .scard:hover { border-color: #9d7542; box-shadow: 0 2px 0 #e0bd88; }
#app .win .navrow.cur, #app .win .scard.sel { border-color: #54796e; box-shadow: 0 0 0 1px #54796e; }
.nr-scene { background: linear-gradient(0deg, #14292b70, transparent), var(--scene-art) center / cover no-repeat, #354d52; }
.room-planner { color: #26443e; }
.room-planner > div:first-child h3 { margin: 3px 0 10px; font-family: "Bricolage Grotesque", Manrope, sans-serif; }
.starter-room-preview { border-radius: 10px; overflow: hidden; background: linear-gradient(0deg, #142b34bb, #142b3455), var(--scene-art) center / cover, #28474b; }
.starter-room-preview canvas { display: block; width: 100%; height: 220px; }
.room-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.room-styles button { padding: 8px; border: 1px solid #adbaa5; border-radius: 7px; background: #ebeddb; color: #26443e; text-align: left; }
.room-styles button[aria-pressed="true"] { background: #d4e5d7; border-color: #4b7c6c; box-shadow: 0 0 0 1px #4b7c6c inset; }
.room-styles strong, .room-styles small { display: block; }
.room-styles strong { font-size: 12px; }
.room-styles small { margin-top: 3px; font-size: 10px; line-height: 1.35; }
.room-planner > p { font-size: 12px; }
.room-planner .fld { margin-bottom: 8px; }
#app .room-guestbook { background: #f2e9cf; border-color: #bca375; color: #263e39; }
#app .room-guestbook .win-head { background: #34554a; color: #fff0cc; border-color: #bca375; }
#app .room-guestbook .win-body { background: #f2e9cf; padding: 0 0 10px; }
.guest-hero { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(120deg, #314d43, #21383c); color: #fff0d1; }
.guest-hero .guest-stamp { width: 72px; }
.guest-hero h2 { margin: 3px 0; overflow-wrap: anywhere; font: 800 26px/1.05 "Bricolage Grotesque", Manrope, sans-serif; letter-spacing: -.04em; }
.guest-hero p { margin: 0; font-size: 11px; color: #d1dfc9; }
.guest-hero .door-kicker { color: #efbd84; }
.guest-stamp { display: block; flex: none; width: 48px; aspect-ratio: 1; background: url('../assets/game/guestbook.webp') 0 0 / 200% 200% no-repeat; }
.guest-stamp-music { background-position: 100% 0; }
.guest-stamp-hangout { background-position: 0 100%; }
.guest-stamp-book { background-position: 100% 100%; }
.guest-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 12px 0; }
.guest-choices button { display: grid; justify-items: center; gap: 6px; min-height: 90px; padding: 8px 4px; border: 1px solid #bbbaa1; border-radius: 8px; background: #fcf5e3; color: #29483e; }
.guest-choices button:hover, .guest-choices button[aria-pressed="true"] { border-color: #557e68; background: #e1ebd9; }
.guest-choices button[aria-pressed="true"] { box-shadow: 0 0 0 1px #557e68 inset; }
.guest-choices strong { font-size: 11px; line-height: 1.3; }
.guest-status { margin: 10px 13px; color: #46604d; font-size: 11px; }
.guest-pages { display: grid; gap: 8px; margin: 0 12px; }
.guest-entry { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px; border: 1px solid #d7cbaa; border-radius: 7px; background: #fff8e7; box-shadow: 0 2px 0 #d8cbae4d; }
.guest-entry canvas { width: 42px; height: 57px; border-radius: 6px; background: #e3e8d5; }
.guest-entry strong { font-size: 13px; color: #2d493f; }
.guest-entry p { margin: 3px 0; color: #45614d; font-size: 11px; }
.guest-entry time { color: #817355; font-size: 10px; }
.guest-profile { grid-column: 2; justify-self: start; padding: 0; border: 0; border-bottom: 1px solid #b5b9a1; background: none; color: #406759; font-size: 10px; }
.guest-entry > .guest-stamp { grid-column: 3; grid-row: 1 / 3; }
.guest-empty { display: grid; justify-items: center; padding: 14px; color: #53644b; font-size: 12px; }
.guest-empty .guest-stamp { width: 68px; }
@media (max-width: 490px) {
  .starter-room-preview canvas { height: 180px; }
  .room-styles button { padding: 6px; }
  .guest-hero { padding: 10px; gap: 8px; }
  .guest-hero h2 { font-size: 23px; }
}
.room-panels { display: contents; }
#app :is(#roomInfo, #jukebox) { background: #f6e8cc; color: #192a33; border: 1px solid #9ca28b; box-shadow: 0 4px 15px #10212966; }
#app #roomInfo .ri-name { color: #294b52; }
#app #roomInfo :is(.ri-meta, .ri-desc), #app #jukebox .muted { color: #48615b; }
@media (min-width: 701px) {
  .room-panels {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    width: clamp(205px, 20vw, 262px);
    max-height: calc(100% - 65px);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #a49373 transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .room-panels :is(#roomInfo, #jukebox) { position: static; width: 100%; flex: none; }
}

.club-button {
  border: 1px solid #829b95;
  border-radius: 8px;
  background: #23383f;
  color: #fff1d9;
  padding: 9px 13px;
  min-height: 40px;
  font-size: 12px;
  font-weight: 850;
}
.club-button:hover { background: #355159; border-color: #c8ddd2; }
.club-button.primary { background: #ffae7e; border-color: #ffae7e; color: #182a31; }
.club-button.primary:hover { background: #ffcb9d; }
.club-button.primary span { margin-left: 12px; }
#view-hotel {
  overflow: auto; color: #f6e8cc; scrollbar-color: #506762 #111e23;
  background: radial-gradient(ellipse at 70% 0, #223b40, transparent 64%), #111e23;
}
.home-content { width: min(100%, 1350px); margin: auto; padding: clamp(14px, 2.4vw, 32px); }
.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(290px, 35%) 1fr;
  align-items: center;
  min-height: clamp(270px, 35vh, 370px);
  overflow: hidden;
  border: 1px solid #a18a61;
  border-radius: 20px;
  background: linear-gradient(135deg, #263a3d, #15252a 65%);
  box-shadow: 0 20px 46px #07101469;
}
.home-stage {
  position: relative; align-self: stretch; grid-area: 1 / 2; min-width: 0;
  background: radial-gradient(ellipse at 60% 45%, transparent 30%, #10202760),
    #1c353c var(--scene-art, none) center 41% / cover;
}
.home-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #1d3034, transparent 25%), linear-gradient(0deg, #09151db0, transparent 35%); }
#homePreview { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.home-live { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid #9f9272; border-radius: 10px; background: #121d24eb; box-shadow: 0 5px 18px #0007; }
.home-live[hidden] { display: none; }
.home-live strong, .home-live small { display: block; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-live small { margin-top: 2px; color: #cde1d6; }
.home-live-meter { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; width: 18px; height: 18px; color: #fbd28a; }
.home-live-meter i { display: block; width: 3px; height: 35%; border-radius: 3px; background: currentColor; }
.home-live-meter i:nth-child(2) { height: 90%; }
.home-live-meter i:nth-child(3) { height: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .home-live.is-playing .home-live-meter i { animation: hall-level .9s ease-in-out infinite alternate; }
  .home-live.is-playing .home-live-meter i:nth-child(2) { animation-delay: -.55s; }
  .home-live.is-playing .home-live-meter i:nth-child(3) { animation-delay: -.2s; }
  @keyframes hall-level { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
}
.home-hero-content { position: relative; grid-area: 1 / 1; padding: clamp(20px, 3vw, 40px); }
.home-hero h1 { margin: 13px 0 0; font: 800 clamp(40px, 4.8vw, 72px)/.94 'Bricolage Grotesque', sans-serif; letter-spacing: -.055em; color: #ffebcd; }
.home-presence { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 10px; border: 1px solid #48625a; border-radius: 99px; background: #203932; color: #d7f3e3; font-size: 12px; font-weight: 750; }
.home-presence > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: #95e6ba; box-shadow: 0 0 10px #8cdcba88; }
#homeTrack { margin: 15px 0 22px; color: #ded6c4; line-height: 1.45; overflow-wrap: anywhere; }
.home-hall { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 45px; padding: 9px 16px; border: 1px solid #ffddb0; border-radius: 9px; background: #ffc48f; color: #22292b; font-weight: 900; }
.home-hall:not(:disabled):hover { background: #ffe3bb; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; }
.home-actions a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #d9decc; font-weight: 700; text-underline-offset: 4px; }
.home-actions a:hover { color: #ffe3bb; }
.home-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.home-shortcuts button {
  --shortcut: #ffd19e;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
  min-height: 74px; padding: 10px 13px; border: 1px solid #455451; border-radius: 12px;
  background: linear-gradient(105deg, #233638 32%, #192a30); color: #ffe9c7; text-align: left;
}
.home-shortcuts button:not(:disabled):hover, .home-shortcuts button.active { border-color: var(--shortcut); box-shadow: inset 0 0 24px #fff1; }
.home-shortcuts strong { display: block; font: 800 clamp(15px, 1.45vw, 20px)/1.15 'Bricolage Grotesque', sans-serif; }
.home-shortcuts small { display: block; margin-top: 4px; color: #b9cdc5; }
.home-shortcut-art { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid color-mix(in srgb, var(--shortcut) 46%, #1b2b30); border-radius: 10px; background: color-mix(in srgb, var(--shortcut) 12%, #1b2b30); color: var(--shortcut); font-size: 22px; }
.home-arrow { color: var(--shortcut); }
#homeArcade { --shortcut: #e6b6fd; background: linear-gradient(90deg, #242840 38%, #242840a6 75%), url('../assets/game/scenes/arcade-after-hours.webp') right center / cover; }
#homeLobby { --shortcut: #a9ecd1; background: linear-gradient(90deg, #183435 38%, #183435a6 75%), url('../assets/game/scenes/lobby-illustrated.webp') right center / cover; }
#homeProgress { --shortcut: #ffda86; }
.home-pass-disc {
  background: radial-gradient(circle, #221c1a 6%, #f6d389 9% 20%, transparent 22%, #362b27 23% 28%, #836b49 30% 32%, #322724 34% 43%, #a89058 45% 48%, #423a2a 50% 54%, #6d5b33 56%, #333227 58%);
}
#view-hotel button:focus-visible { outline: 2px solid #ffdc9d; outline-offset: 2px; }
.home-status { color: #ffd4aa; margin: 12px 0; }
.home-status:empty { display: none; }
.home-rooms { margin-top: clamp(23px, 3vw, 34px); }
.home-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 12px; margin-bottom: 12px; }
.home-section-head h2 { margin: 0; font: 800 clamp(23px, 3vw, 36px)/1.1 'Bricolage Grotesque', sans-serif; }
.home-section-head > div { display: flex; gap: 8px; flex-wrap: wrap; }
.home-section-head button { min-height: 38px; padding: 5px 11px; color: #f6dcb7; background: #203238; border: 1px solid #485653; border-radius: 8px; }
.home-section-head button:hover { border-color: #ffc584; }
.home-collection { margin-top: 20px; }
.home-collection .home-section-head { margin-bottom: 8px; }
.home-collection h2 { font-size: clamp(23px, 2.5vw, 32px); }
#homeCollectionItems { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.home-collectible {
  --tier: #ded7bd;
  display: grid; grid-template-columns: minmax(54px, 42%) minmax(0, 1fr); align-items: center; gap: 9px;
  min-height: 100px; padding: 7px 10px 7px 4px; border: 1px solid #536159; border-radius: 12px;
  background: #1b2b30; color: #ffe9c7; text-align: left;
}
.home-collectible.tier-rare { --tier: #a9d9ff; }
.home-collectible.tier-epic { --tier: #e7b8fa; }
.home-collectible:hover { border-color: var(--tier); background: #253940; }
.home-collectible-art { display: grid; place-items: center; min-width: 0; border-radius: 8px; background: radial-gradient(ellipse, color-mix(in srgb, var(--tier) 17%, transparent), transparent 69%); }
.home-collectible canvas { display: block; width: 100%; height: 86px; }
.home-collectible-copy strong { display: block; margin-bottom: 4px; font: 800 clamp(14px, 1.25vw, 19px)/1.14 'Bricolage Grotesque', sans-serif; overflow-wrap: anywhere; }
.home-collectible-copy small { display: flex; flex-wrap: wrap; gap: 3px 9px; color: var(--tier); font-weight: 700; }
.home-collectible-copy small span { color: #ffda9e; white-space: nowrap; }
.pass-window .win-body { padding: 0; background: #14292c; color: #fff1d7; }
.pass-content { display: grid; gap: 14px; padding: 14px; }
.pass-content h3, .pass-content p { margin: 0; }
.pass-content p { margin-top: 4px; color: #d7d6c6; font-size: .9em; }
.pass-level, .pass-gold, .pass-premium { padding: 12px; border: 1px solid #53706a; border-radius: 8px; background: #203b3c; }
.pass-level > div, .pass-premium > div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.pass-level progress { width: 100%; height: 9px; margin: 8px 0 2px; accent-color: #ffc97b; }
.pass-gold { display: flex; align-items: center; gap: 10px; border-color: #aa8145; background: radial-gradient(ellipse at left, #71502c, #382b27 70%); }
.pass-gold canvas { width: clamp(55px, 20vw, 104px); height: auto; flex-shrink: 0; }
.pass-gold strong { display: block; margin-top: 6px; color: #ffdd93; }
.pass-track { list-style: none; display: grid; gap: 4px; margin: 7px 0 0; padding: 0; }
.pass-track li { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 38px; padding: 0 8px; border-radius: 5px; background: #203b3c; }
.pass-track canvas { width: 40px; height: 38px; }
.pass-tier, .pass-premium span { color: #ffda98; }
.pass-currency { text-align: center; font-weight: 800; color: #ffd189; }
.pass-track .earned { color: #b4ecc8; }
#homeRooms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#homeRooms .guide-room { position: relative; display: grid; align-items: start; min-height: clamp(135px, 13vw, 195px); border-color: #53635a; border-radius: 13px; isolation: isolate; }
#homeRooms .guide-room:hover { border-color: #ffc584; }
#homeRooms .guide-cover { position: absolute; inset: 0; z-index: -2; background-position: center 43%; }
#homeRooms .guide-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0a151df4, #0a151da6 28%, #0a151d12 66%); }
#homeRooms .guide-room-meta { padding: 13px 14px; font-size: clamp(15px, 1.5vw, 22px); }
#homeRooms .guide-room-meta small { font-size: 12px; }
#homeRooms .guide-room-meta small span { color: #ffd19e; }
.lobby-tutorial { margin-bottom: 9px; padding: 9px; border: 1px solid #957b51; border-radius: 6px; background: #172b2c; }
.lobby-tutorial p { margin: 5px 0 8px; color: #f0e7d2; font-size: 11px; line-height: 1.45; }
@media (max-width: 800px) {
  .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #homeCollectionItems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-stage { grid-area: 1 / 1; min-height: clamp(170px, 53vw, 280px); }
  .home-stage::after { background: linear-gradient(0deg, #1d3034, transparent 25%); }
  .home-hero-content { grid-area: 2 / 1; padding: 8px 18px 20px; }
  .home-hero h1 { margin-top: 9px; }
  #homeTrack { margin: 9px 0 13px; }
  .home-shortcuts button { gap: 7px; padding: 8px; min-height: 62px; }
  .home-shortcut-art { width: 32px; height: 32px; font-size: 17px; }
  .home-shortcuts .home-arrow { display: none; }
  .home-collectible { gap: 4px; grid-template-columns: minmax(43px, 38%) minmax(0, 1fr); }
  .home-collectible canvas { height: 75px; }
  #homeRooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #homeRooms .guide-room-meta { padding: 9px; }
}
#lobbyStops { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lobby-stop {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  padding: 5px 10px;
  border: 1px solid #c59a5d;
  border-radius: 5px;
  background: linear-gradient(180deg, #30483c, #182c27);
  color: #ffe8b7;
  box-shadow: 0 2px 5px #10100cb3;
  text-shadow: 0 1px 2px #111a16;
  font: 750 12px/1.3 system-ui, sans-serif;
  white-space: nowrap;
}
.lobby-stop[data-stop="lobby_studio_gate"] { border-color: #7db9ac; background: #193737; color: #c7f5e5; }
.lobby-stop:hover, .lobby-stop:focus-visible { background: #ffe3a4; color: #203632; text-shadow: none; }
#app .stage.is-lobby #roomInfo { background: linear-gradient(148deg, #34483df5, #172d2af5 68%); border-color: #ad8852; color: #ffebc0; padding: 11px; animation: none; }
#app .stage.is-lobby #roomInfo :is(.ri-desc, .ri-meta) { color: #d8d5b9; }
#app .stage.is-lobby #roomInfo .ri-name { color: #ffebc0; font: 800 25px/1 "Bricolage Grotesque", Manrope, sans-serif; letter-spacing: -.04em; }
.lobby-plaque { color: #dfb876; font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.lobby-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 5px 0 10px; }
.lobby-presence { display: flex; align-items: center; gap: 5px; color: #d4ead3; font: 800 10px/1.2 Manrope, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lobby-presence i { width: 6px; height: 6px; border-radius: 50%; background: #a7dbb0; box-shadow: 0 0 5px #b9f4c699; }
.lobby-destinations { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lobby-destinations button { min-height: 43px; padding: 6px 8px; border: 1px solid #af9162; border-radius: 7px; background: #244641; color: #ffebc0; text-align: left; }
.lobby-destinations button:first-child { background: #ffba89; color: #24332e; border-color: #ffcf9f; }
.lobby-destinations button:hover { filter: brightness(1.12); }
.lobby-destinations strong { display: block; font-size: 12px; }
.lobby-destinations small { display: flex; justify-content: space-between; gap: 5px; font-size: 10px; }
#riToday { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(115deg, #59354b, #322c40); color: #fff0cc; }
#riToday > span:last-child { color: #ffc795; }
#app .club-set { border-color: #c1a473; background: #efe6ce; color: #263d38; }
#app .club-set .win-head { background: #263e3d; color: #ffe9c1; border-color: #b69667; }
#app .club-set .win-body { padding: 0 0 12px; background: #efe6ce; }
.set-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 138px; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 15px clamp(13px, 4vw, 23px); background: #271a34; color: #fff0d4; }
.set-hero::before { content: ''; position: absolute; z-index: -1; top: 50%; right: 0; width: min(65%, 328px); aspect-ratio: 1; transform: translateY(-50%); background: url('../assets/game/club-sleeves.webp') 100% 100% / 200% 200%; mask-image: linear-gradient(90deg, transparent, #000 35%); }
.set-hero .door-kicker { color: #ffb884; text-transform: uppercase; }
.set-hero h2 { max-width: 62%; margin: 0; font: 800 clamp(27px, 6vw, 45px)/.98 "Bricolage Grotesque", Manrope, sans-serif; letter-spacing: -.055em; }
.set-hero p { max-width: 26ch; margin: 3px 0 0; color: #f6dfbd; font-size: 12px; }
.set-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px 12px 0; }
.set-track { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: minmax(80px, auto) auto auto; gap: 8px; padding: 9px; border: 1px solid #b5b39a; border-radius: 9px; background: #faf4e2; }
.set-track.is-voted { border-color: #477968; background: #e3eee1; box-shadow: 0 0 0 1px #477968 inset; }
.set-track .set-track-art { position: relative; align-self: start; width: 80px; border-radius: 5px; }
.set-track-art span { position: absolute; top: 4px; left: 4px; padding: 2px 5px; border-radius: 4px; background: #15292ee8; color: #fff1d2; font: 800 10px/1.2 Manrope, sans-serif; }
.set-track :is(.studio-sleeve-harbor, .studio-sleeve-palms, .studio-sleeve-moon) { background-image: url('../assets/game/club-sleeves.webp'); }
.set-track .studio-sleeve-palms { background-position: 100% 0; }
.set-track .studio-sleeve-moon { background-position: 0 100%; }
.set-track-info { align-self: center; }
.set-track-info h3 { margin: 0; color: #223d39; font: 800 18px/1.05 "Bricolage Grotesque", Manrope, sans-serif; }
.set-track-info p { margin: 4px 0; color: #42594f; font-size: 11px; line-height: 1.3; }
.set-track-info small, .set-tally span { color: #47635a; font: 800 10px/1.3 Manrope, sans-serif; }
.set-tally, .set-actions { grid-column: 1 / -1; }
.set-tally { display: flex; align-items: center; gap: 8px; }
.set-tally span { flex: none; min-width: 5.5ch; }
.set-tally i { flex: 1; height: 5px; border-radius: 4px; background: #d3ded2; overflow: hidden; }
.set-tally b { display: block; height: 100%; background: #618b79; }
.set-actions { display: flex; gap: 6px; }
.set-actions button { flex: 1; }
.set-listen, .set-vote { min-height: 36px; padding: 5px 7px; border: 1px solid #839e91; border-radius: 6px; background: #f6f5e6; color: #23433d; font: 800 11px/1.2 Manrope, sans-serif; }
.set-listen:hover, .set-listen[aria-pressed="true"] { background: #d3e5da; }
.set-vote { background: #fabb90; border-color: #bc8b65; color: #293631; }
.set-vote[aria-disabled="false"]:hover { background: #ffd7a9; }
.set-vote[aria-disabled="true"] { background: #e8e6d8; color: #536357; border-color: #a6b1a1; cursor: default; }
.set-vote[aria-pressed="true"] { background: #345d51; border-color: #345d51; color: #fff2d3; }
.set-feedback { margin: 9px 12px; color: #39594f; font-size: 11px; }
.set-yesterday { margin: 0 12px; padding: 8px 10px; border-top: 1px dashed #b8aa83; }
.set-yesterday div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-yesterday p { margin: 3px 0 0; color: #334a40; font-size: 12px; }
@media (max-width: 490px) {
  .set-tracks { grid-template-columns: 1fr; }
  .set-track { grid-template-columns: 69px minmax(0, 1fr); grid-template-rows: minmax(69px, auto) auto auto; }
  .set-track .set-track-art { width: 69px; }
}
.lobby-actions { display: flex; gap: 6px; }
#riIdle { background: #dec093; color: #332f26; }
#riIdle[aria-pressed="true"] { background: #553c56; color: #f8dcad; }
#riIdle:hover { filter: brightness(1.1); }
#infostand .is-idle { color: #66507d; font-weight: 800; }
#infostand.is-admin .is-idle { color: #f1cdac; }
.lobby-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #bd955a;
  border-radius: 6px;
  background: #2b453b;
  color: #ffe6b8;
  font: 800 11px/1.2 Manrope, sans-serif;
}
.lobby-guide-btn:hover { background: #3e5b4d; }
#app .hotel-guide, .hotel-guide .win-body { background: #192d30; color: #ffedd0; }
.hotel-guide .win-body { padding: 0 0 14px; }
.hotel-guide .win-x { min-width: 28px; min-height: 28px; border: 1px solid #8e9b7f; background: #2b443d; color: #ffe7c3; box-shadow: none; }
.hotel-guide .win-x:hover { background: #486357; }
.guide-hero {
  display: grid;
  justify-items: start;
  align-content: center;
  min-height: 210px;
  padding: clamp(16px, 4vw, 36px);
  background: linear-gradient(90deg, #142a2ef5 8%, #172b31bd 49%, #172b3133), url('../assets/biitsi-coast.webp') center 48% / cover;
  border-bottom: 1px solid #688378;
}
.guide-hero .door-kicker { color: #c0d5c8; }
.guide-hero h2 { margin: 5px 0 0; color: #fff2d7; font: 800 clamp(33px, 6.5vw, 58px)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.06em; }
.guide-hero p { margin: 7px 0 13px; max-width: 36ch; color: #fff3d9; font-size: 13px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.guide-actions button {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #dfb174;
  border-radius: 6px;
  background: #f4bd87;
  color: #1f3633;
  font: 800 12px/1.2 Manrope, sans-serif;
}
.guide-actions button:last-child { color: #ffe8c1; background: #24433e; }
.guide-actions button:hover { filter: brightness(1.12); }
.guide-section { padding: 13px clamp(12px, 3vw, 24px) 0; }
.guide-idle p { margin: 0; color: #d2e1d6; font-size: 12px; line-height: 1.5; }
.guide-section h3 { margin: 0 0 7px; font-size: 17px; color: #ffe7be; }
.guide-rooms, .guide-activity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guide-room {
  display: grid;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #729284;
  border-radius: 8px;
  background: #273d3b;
  color: #ffebc9;
  text-align: left;
}
.guide-room:hover { border-color: #ffc584; background: #36554b; }
.guide-cover {
  display: grid;
  align-items: end;
  justify-items: start;
  min-height: clamp(52px, 9vw, 82px);
  padding: 5px 6px;
  background: linear-gradient(0deg, #111c20a3, transparent 66%), var(--scene-art, radial-gradient(#59766d, #223b3e)) center 40% / cover;
}
.guide-cover small { padding: 2px 4px; background: #162a28e8; color: #ffe8ba; border-radius: 4px; font-size: 9px; font-weight: 800; }
.guide-room-meta { display: grid; gap: 2px; padding: 6px 8px; overflow-wrap: anywhere; font-size: 13px; }
.guide-room-meta small { display: flex; justify-content: space-between; gap: 5px; color: #c9d6c6; font-size: 10px; }
.guide-activity > div { padding: 7px 9px; border: 1px solid #526f66; border-radius: 7px; background: #213836; overflow-wrap: anywhere; }
.guide-activity strong { font-size: 11px; color: #f2cd97; }
.guide-activity p { margin: 2px 0 0; color: #d6e2d1; font-size: 11px; }
@media (max-width: 480px) {
  .guide-hero { min-height: 150px; }
  .guide-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-activity { grid-template-columns: 1fr; }
}
.noticeboard { display: grid; gap: 10px; }
.noticeboard .hcard { background: #20343d; color: #f6e8cc; border: 1px solid #46625f; box-shadow: none; }
.noticeboard .hcard :is(h3, b), .noticeboard .charts li::before { color: #ffd0a8; }
.noticeboard .hcard :is(.muted, small, .tips ul) { color: #c5d6d1; }
.noticeboard .hcard :is(.evrow, .liverow) { background: #2a4148; color: #fff0d9; border: 1px solid #556e6b; }

#rsScenePreview {
  height: 98px;
  border-radius: 9px;
  border: 1px solid #a0b0a0;
  background: var(--scene-art, radial-gradient(ellipse, #3b5e62, #17252a)) center 40% / cover;
  margin-bottom: 10px;
}
#view-studio { background: #17282f; }
.studio {
  display: grid;
  grid-template-columns: clamp(190px, 19vw, 255px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "library head" "library editor";
  width: min(100%, 1510px);
  margin-inline: auto;
}
.studio .lib { grid-area: library; width: auto; min-width: 0; }
.studio .studio-head { grid-area: head; min-width: 0; position: relative; }
.studio .editor { grid-area: editor; }
.studio .lib, .studio .transport, .studio .gridwrap { border-color: #496760; background: #1e343d; }
.studio-starters { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #58746e; background: linear-gradient(110deg, #273f44, #203137); color: #fff1d9; }
.studio-starters .door-kicker { color: #b8d9cb; }
.studio-starters p { margin: 2px 0; font-size: 13px; }
.studio-sleeve { display: block; width: 52px; aspect-ratio: 1; border-radius: 5px; background: #25383d url('../assets/game/studio-sleeves.webp') 0 0 / 200% 200% no-repeat; box-shadow: inset 0 0 0 1px #ffd49b56, 0 2px 4px #172b3359; }
.studio-sleeve-1 { background-position: 100% 0; }
.studio-sleeve-2 { background-position: 0 100%; }
.studio-sleeve-disc { background-position: 100% 100%; width: 43px; }
.starter-list { display: grid; gap: 8px; }
.starter-option { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 9px 7px 7px; border: 1px solid #94aa9b; border-radius: 8px; background: #ebefdf; color: #1b3339; text-align: left; }
.starter-option:hover, .starter-option:focus-visible { background: #d9e9dc; border-color: #456f62; }
.starter-option strong, .starter-option small { display: block; }
.starter-option strong { font-family: "Bricolage Grotesque", Manrope, sans-serif; font-size: 17px; }
.starter-option small { color: #39574f; line-height: 1.3; }
.starter-option b { font-size: 10px; white-space: nowrap; }
.release-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; padding: 13px; border-radius: 11px; background: linear-gradient(128deg, #51303d, #283c40); color: #fff0d4; }
.release-card canvas { display: block; width: 82px; height: 82px; }
#modal .release-card h3 { margin: 3px 0 5px; color: #fff0d4; overflow-wrap: anywhere; }
.release-card p { margin: 0; font-size: 13px; line-height: 1.45; }
.release-card .door-kicker { color: #ffc38c; }
.jb-release { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 8px; margin: 7px 0; padding: 7px; border: 1px solid #cfa26c; border-radius: 8px; background: #fff0d5; }
.jb-release canvas { width: 35px; height: 35px; }
.jb-release strong, .jb-release small { display: block; overflow-wrap: anywhere; }
.jb-release small { color: #69472d; font: 800 9px/1.2 Manrope, sans-serif; letter-spacing: .08em; }
.jb-release button { grid-column: 1 / -1; }
.jb-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #274946; color: #ffcc92; }
.jb-now { padding: 8px; border: 1px solid #8b9b86; border-radius: 8px; background: linear-gradient(120deg, #31514a, #1c3439); color: #fff0d4; align-items: center; }
.jb-live { color: #ffc38c; font: 800 9px/1.4 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.jb-compact { display: grid; gap: 3px; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: #223a3b; color: #fff0d4; }
.jb-compact strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.jb-compact .np-bar { margin-top: 1px; }
#reconnect { align-items: flex-start; padding: min(16vh, 120px) 14px 14px; background: #091c29b8; }
#reconnect > div {
  display: flex; align-items: center; gap: 14px; width: min(500px, 100%); padding: 14px;
  border: 1px solid #b58f67; border-radius: 10px; background: #20393f; color: #fff0d6;
  box-shadow: 0 10px 42px #08151da0;
}
#reconnect p { flex: 1; margin: 0; font-size: 13px; line-height: 1.45; }
#reconnect .btn { flex: none; min-height: 38px; border-color: #e2b485; background: #f0c292; color: #263a39; box-shadow: none; }
#tbModeration[hidden] { display: none; }
#tbModeration { color: #ffe6ad; background: #314749; border-color: #9c8056; }
.moderation-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.moderation-list { display: grid; gap: 8px; }
.moderation-list article { margin: 0; padding: 11px; overflow-wrap: anywhere; }
.moderation-list article h3, .moderation-list article p { margin: 0 0 6px; }
.moderation-list article small { display: block; margin-bottom: 6px; }
#arcadeDialog {
  width: min(470px, calc(100% - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 18px;
  border: 1px solid #cba466; border-radius: 17px; color: #fff0cf;
  background: radial-gradient(ellipse at 55% 8%, #384e59, #172833 66%);
  box-shadow: inset 0 0 0 4px #6b544959, 0 18px 70px #06101bd9;
}
#arcadeDialog::backdrop { background: #091521bf; }
.arcade-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.arcade-head p { margin: 0 0 3px; color: #f5c88e; font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.arcade-head h2 { margin: 0; font: 850 clamp(26px, 9vw, 47px)/.97 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; }
.arcade-head button { flex: none; width: 37px; height: 37px; border: 1px solid #9b8869; border-radius: 8px; background: #1a303b; color: #ffe7bf; font-size: 23px; }
.arcade-score { display: flex; gap: 15px; justify-content: space-between; margin: 14px 0; padding: 8px 10px; border-block: 1px solid #a68f646b; color: #f1d7af; font-size: 12px; }
.arcade-score strong { margin-left: 4px; color: #fff1ce; font-variant-numeric: tabular-nums; }
.arcade-pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.arcade-pads button {
  --pad: #78e1d0;
  display: grid; place-items: center; min-height: 65px; height: min(13dvh, 98px);
  border: 1px solid var(--pad); border-radius: 12px;
  background: color-mix(in srgb, var(--pad) 20%, #142936); color: #fff2dc;
  font: 850 26px/1 'Bricolage Grotesque', sans-serif; box-shadow: inset 0 -5px 0 #0c192760;
}
.arcade-pads button:nth-child(2) { --pad: #f2b576; }
.arcade-pads button:nth-child(3) { --pad: #e48dbe; }
.arcade-pads button:nth-child(4) { --pad: #9ba9ff; }
.arcade-pads button.is-lit { background: var(--pad); color: #18232b; box-shadow: inset 0 0 0 3px #fff7, 0 0 21px var(--pad); }
.arcade-status { margin: 14px 0 10px; color: #fff0cf; font-weight: 800; font-size: 14px; min-height: 21px; }
.arcade-start { padding: 8px 14px; min-height: 42px; border: 1px solid #ffd89c; border-radius: 8px; background: #f5c48b; color: #202d33; font-weight: 900; }
.arcade-start[hidden] { display: none; }
.arcade-hint { margin: 9px 0 0; color: #d1d9cb; font-size: 12px; }
#arcadeDialog button:focus-visible { outline: 2px solid #fff2ca; outline-offset: 2px; }

#win-shop .shop-bar { margin-top: 0; }
#app #win-shop {
  color: #f6e7ca; border: 1px solid #a48660; border-radius: 16px;
  background: #172830; box-shadow: 0 20px 80px #060e15a6;
}
#app #win-shop .win-head {
  min-height: 48px; padding: 10px 13px 10px 17px; border-bottom: 1px solid #79644c;
  background: linear-gradient(110deg, #182d35, #273e40 65%, #283239);
}
#app #win-shop .win-title { color: #ffe5bd; font: 800 18px/1.1 'Bricolage Grotesque', sans-serif; }
#app #win-shop .win-x { min-width: 30px; min-height: 30px; color: #ffe5bd; border: 1px solid #816c51; border-radius: 6px; background: #1b2d36; }
#app #win-shop .win-body { background: #14252c; padding: 13px; scrollbar-color: #8e785d #192c34; }
#app #win-shop .shop2 { gap: 15px; }
#app #win-shop .shop-cats { width: 142px; gap: 4px; }
#app #win-shop .shop-cats button {
  min-height: 38px; padding: 5px 8px; border: 1px solid #3b5554; border-radius: 7px;
  background: #1f353a; color: #f6e4c2; box-shadow: none; font-size: 12px;
}
#app #win-shop .shop-cats button:hover { background: #314948; border-color: #bc9770; }
#app #win-shop .shop-cats button.active { background: #f1c396; border-color: #fbdab6; color: #29322f; }
#app #win-shop .shop-cats .cat-ic { width: 24px; height: 24px; flex-shrink: 0; background: #f5e8ce; border: 1px solid #b7ab83; color: #253e3b; }
#app #win-shop .shop-cats [data-cat="ultra"] { background: #342e43; border-color: #8b7294; }
#app #win-shop .shop-cats [data-cat="ultra"].active { background: #d9b8df; color: #302138; border-color: #f2d5ec; }
.shop-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 3px 0 10px; }
.shop-heading h2 { margin: 0; color: #f6e4c5; font: 850 clamp(22px, 3vw, 32px)/1 'Bricolage Grotesque', sans-serif; }
.shop-heading > span { color: #eccc9d; font-size: 12px; font-weight: 850; white-space: nowrap; }
.shop-search { position: relative; flex: 1; min-width: 0; }
.shop-search > span { position: absolute; left: 11px; top: 12px; width: 11px; height: 11px; border: 1.5px solid #c8b391; border-radius: 50%; pointer-events: none; }
.shop-search > span::after { content: ''; position: absolute; left: 7px; top: 8px; width: 5px; border-top: 1.5px solid #c8b391; transform: rotate(48deg); }
#win-shop .shop-bar { gap: 8px; }
#win-shop :is(#shSearch, #shSort) { min-height: 38px; border: 1px solid #5d746e; border-radius: 7px; color: #faeacf; background: #203a40; }
#win-shop #shSearch { width: 100%; padding: 6px 8px 6px 30px; }
#win-shop #shSearch::placeholder { color: #cfccbc; }
#win-shop #shSort { max-width: 44%; padding: 5px 8px; }
.shop-count { margin: 4px 0 7px; color: #bacdc5; font-size: 11px; }
.shop-empty { grid-column: 1 / -1; margin: 3px 0; padding: 14px; border: 1px dashed #637b75; border-radius: 8px; color: #e5dbbf; }
#app #win-shop .scard:not(.ultra-card) {
  background: radial-gradient(ellipse at 50% 22%, #fff7df, #e8dac0); color: #223e3a; border: 1px solid #b3a07c;
  padding: 7px 5px 9px; border-radius: 9px; align-self: stretch;
}
#app #win-shop .scard:not(.ultra-card):hover { background: #fff5db; border-color: #d2935c; box-shadow: 0 0 0 2px #c08c6452; }
#app #win-shop .scard .sc-price { margin-top: auto; color: #664102; }
#app #win-shop .shop-cats [data-cat="night-market"] { background: #304944; border-color: #a27d56; }
#app #win-shop .shop-cats [data-cat="night-market"].active { background: #eac28f; color: #263533; border-color: #ffdaa9; }
#win-shop .shop-market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app #win-shop .shop-market .scard {
  position: relative; isolation: isolate; padding: 10px;
  background: radial-gradient(ellipse at 50% 26%, #355553, #192f3b 76%);
  color: #ffe9ba; border-color: #917849;
}
#app #win-shop .shop-market .scard:hover { background: radial-gradient(ellipse at 50% 26%, #4c6560, #253b45 76%); border-color: #ecc384; }
#win-shop .shop-market .scard canvas { width: min(90%, 210px); height: clamp(96px, 23vw, 172px); }
#win-shop .shop-market .sc-name { font-size: 14px; }
#app #win-shop .shop-market .sc-price { color: #ffcf94; }
.shop-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.shop-vault {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative;
  min-height: 250px; margin: 0 0 10px; overflow: hidden; border: 1px solid #a88864; border-radius: 12px;
  background: linear-gradient(90deg, #10232cf5, #122730a8 53%, #162c344f), #172832 url('../assets/game/ultra/vault.webp') center 39% / cover;
}
.shop-vault[hidden] { display: none; }
.vault-copy { position: relative; z-index: 1; padding: 15px 0 15px clamp(15px, 3vw, 30px); }
.vault-copy h2 { margin: 0 0 9px; color: #ffe3b5; font: 850 clamp(32px, 5vw, 68px)/.86 'Bricolage Grotesque', sans-serif; letter-spacing: -.059em; }
.vault-feature { display: grid; gap: 2px; min-height: 43px; margin: 11px 0 7px; }
.vault-feature small { color: #e3c7eb; font-size: 10px; font-weight: 800; }
.vault-feature strong { color: #fff1d6; font-size: clamp(15px, 2vw, 21px); }
.vault-open { min-height: 36px; padding: 5px 9px; border: 1px solid #dfb58e; border-radius: 6px; background: #f2c69e; color: #273137; font-weight: 850; }
.vault-open:hover { background: #ffe6bf; }
.vault-open span { margin-left: 5px; }
.vault-object { width: 100%; height: min(235px, 38vw); min-height: 130px; object-fit: contain; padding: 9px 20px 24px 0; filter: drop-shadow(0 8px 18px #07121a); }
.vault-controls { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.vault-controls button { width: 32px; height: 32px; padding: 0; border: 1px solid #b5a48c; border-radius: 6px; background: #1b3039; color: #ffe3bc; font-size: 23px; line-height: 1; }
.vault-controls button:hover { background: #385651; }
#win-shop .shop-cats [data-cat="ultra"] { background: #293843; color: #ffeecc; border-color: #977a57; }
#win-shop .shop-cats [data-cat="ultra"].active { background: #533d55; border-color: #b895cc; }
#win-shop .shop-cats [data-cat="ultra"] .cat-ic { color: #73498a; }
.shop-dialog { width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 30px); padding: 0; color: #203741; border: 1px solid #cca97c; border-radius: 15px; background: #f6edda; box-shadow: 0 18px 75px #07131e9c; }
.shop-dialog::backdrop { background: #081722aa; }
.shop-dialog .shop-detail { padding: 20px 44px 20px 18px; border: 0; border-radius: 0; }
.shop-dialog .sd-info { min-width: 0; }
.shop-dialog .sd-info h3 { margin: 0 0 5px; font: 800 clamp(20px, 4vw, 30px)/1.1 'Bricolage Grotesque', Manrope, sans-serif; overflow-wrap: anywhere; }
.shop-dialog-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 34px; height: 34px; border: 1px solid #a68d6d; border-radius: 8px; background: #fff6de; color: #263a3b; font-size: 21px; }
.shop-feedback { margin: 0; padding: 9px 18px; background: #fff0d8; color: #8d2920; font-weight: 800; }
.shop-feedback:empty { display: none; }
#win-shop .shop-ultra { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
#app #win-shop .ultra-card { min-width: 0; padding: 9px; background: radial-gradient(ellipse at 50% 40%, #3d3851, #192d39 74%); border-color: #927ca7; color: #fff0d0; }
#app #win-shop .ultra-card:hover { border-color: #ffd591; background: radial-gradient(ellipse at 50% 40%, #544465, #233442 74%); }
#win-shop .ultra-card img { width: 100%; height: 115px; object-fit: contain; }
#win-shop .ultra-card .sc-name { font-size: 13px; }
.ultra-label { color: #ead3ff; font-size: 10px; font-weight: 850; letter-spacing: .09em; }
.ultra-value { color: #ffe0a9; font-size: 13px; font-weight: 750; }
#win-shop .shop-dialog .ultra-detail { align-items: center; background: radial-gradient(ellipse at 24% 50%, #453851, transparent 66%), #162a35; color: #fff0d0; }
.shop-dialog .ultra-detail .sd-img { display: grid; place-items: center; flex: 0 1 245px; background: transparent; }
.ultra-detail .sd-img img { width: 100%; max-height: 235px; object-fit: contain; }
.ultra-detail .sd-info h3 { margin-top: 6px; }
.ultra-detail .ultra-status { margin-top: 12px; color: #ffc890; font-size: 12px; font-weight: 800; }
@media (max-width: 700px) {
  #app #win-shop .shop2 { gap: 8px; }
  #app #win-shop .shop-cats { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0 6px; }
  #win-shop .shop-cats button { flex: none; white-space: nowrap; }
  #win-shop .shop-cats :is(.legend, .free) { display: none; }
  #win-shop .shop-ultra { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .shop-dialog .shop-detail { flex-direction: column; padding: 15px 40px 16px 15px; }
  .shop-dialog .ultra-detail .sd-img { flex: none; width: 100%; }
  .ultra-detail .sd-img img { height: min(33dvh, 180px); }
  .shop-vault { min-height: 193px; background-position: center, 63% 32%; }
  .vault-object { padding-right: 7px; }
}
.jb-meta small { color: #cfddd0; }
.jb-meta .np-bar { background: #68827b; }
#jbFill { background: linear-gradient(90deg, #87c9b3, #f8c285); }
#btnErase[aria-pressed="true"] { background: #ffae7e; color: #182a31; border-color: #ffae7e; }
#grid.is-erasing .cell.full:hover { outline: 2px solid #ffae7e; outline-offset: -3px; cursor: crosshair; }

@media (max-width: 700px) {
  .lobby-stop { font-size: 10px; min-height: 26px; padding: 3px 4px; }
  #app .stage.is-lobby #roomInfo { width: min(250px, calc(100% - 16px)); max-width: none; padding: 8px; }
  #app .topright { gap: 5px; min-width: 0; }
  #app #userLvl { white-space: nowrap; }
  #app #dbBox { padding-inline: 6px; font-size: 12px; }
  #app #top .iconbtn { flex: none; width: 29px; height: 29px; padding: 0; }
  #app #userChip { padding-right: 5px; gap: 2px; }
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "head" "library" "editor"; gap: 9px; padding: 9px; }
  .studio .studio-scene { height: 132px; }
  .studio .st-exit { position: static; justify-content: flex-end; margin: 0 0 8px; flex-wrap: wrap; }
  .studio .lib { padding: 8px; }
  .studio .lib #libList { flex-direction: row; overflow: auto; padding: 3px 2px 6px; }
  .studio .lib .sample { flex: none; }
  .studio .lib > p { display: none; }
}
@media (max-width: 420px) {
  #app #top { gap: 4px; padding-inline: 5px; }
  #app #top .biitsi-logo { gap: 4px; font-size: 20px; }
  #app #top .biitsi-logo img { width: 23px; height: 23px; }
  #app .topright { gap: 3px; }
  #app #userChip { min-width: 0; padding-inline: 3px; }
  #app #userAv { width: 24px; height: 30px; flex: none; }
  #app #staffBadge:not([hidden]) { min-width: 0; white-space: nowrap; font-size: 10px; letter-spacing: 0; }
  #app #staffBadge.staff-owner::before, #app #staffBadge.staff-owner::after { display: none; }
  .studio-starters { grid-template-columns: 1fr auto; }
  .studio-sleeve-disc { display: none; }
  .studio-starters p { font-size: 11px; }
  #btnStarter { padding-inline: 9px; }
  #btnStarter span { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #app #toolbar button:hover { transform: none; }
  .transport .btn.play.playing { animation: none; }
}

#screen-creator {
  background: linear-gradient(90deg, #14242be0, #14242b70, #14242bd9),
    #182c34 url('../assets/game/scenes/lobby-illustrated.webp') center 29% / cover no-repeat;
}
#screen-creator::before, #screen-creator::after { display: none; }
#screen-creator .cr-wrap > h2 { color: #f7e7cb; }
#screen-creator .cr-box, #screen-creator .crx {
  background: #f4e8d3;
  color: #21343b;
}
#screen-creator .cr-box { border: 1px solid #aa9f88; box-shadow: 0 12px 46px #09181a91; }
.crx .crx-stage {
  background: radial-gradient(ellipse at 51% 31%, #b7865c25, #111f28b5 76%),
    #26373c url('../assets/game/scenes/lobby-illustrated.webp') 75% center / cover;
  border: 1px solid #576d67;
  box-shadow: none;
}
.crx .crx-stage::before { background: linear-gradient(0deg, #0b202a5c, transparent 50%); }
.crx .crx-podium {
  background: radial-gradient(ellipse at 49% 27%, #ccb18a, #74583f);
  border: 1px solid #f3d1a08c;
  box-shadow: 0 5px 0 #4d382c, 0 9px 18px #091716bd;
}
.crx .crx-panel { background: #fbf2e3; border-color: #c9bc9e; }
.crx .crx-opt { background: #ece0ca; border-color: #d0c2a7; }
.crx .crx-opt.on { border-color: #4e8179; box-shadow: 0 0 0 1px #4e8179 inset; }
.crx-presets { padding: 9px 10px; border: 1px solid #b9c5b2; border-radius: 10px; background: #e3e8d8; color: #2a504d; }
.crx-presets > div { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; padding: 3px; }
.crx-preset {
  display: grid;
  justify-items: center;
  align-content: start;
  flex: 1 0 63px;
  min-height: 80px;
  padding: 3px;
  border: 1px solid #a8b9a7;
  border-radius: 7px;
  background: #f8f3e5;
  color: #244745;
  font: 800 10px/1.2 Manrope, sans-serif;
}
.crx-preset:hover { background: #d1e0d5; border-color: #577b70; }
.crx-preset canvas { width: 55px; height: 55px; }
.crx-motion {
  min-width: 85px;
  padding: 4px 6px;
  border: 1px solid #64837a;
  border-radius: 8px;
  background: #fbf3e3;
  color: #244745;
  font: 800 12px/1.2 Manrope, sans-serif;
}
.crx .crx-tabs button.on { background: #2c5751; border-color: #29453f; color: #fff0d1; }
.crx-tabs.has-outfits { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.crx-tabs.has-staff { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.crx-wardrobe h3 { margin: 5px 0; font: 800 23px/1.05 "Bricolage Grotesque", Manrope, sans-serif; color: #294c44; }
.crx-wardrobe > p { margin: 7px 0 12px; color: #486358; font-size: 11px; line-height: 1.4; }
.crx-outfits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.crx-outfit { position: relative; display: grid; justify-items: center; align-content: start; gap: 7px; padding: 8px 5px; border: 1px solid #acb59d; border-radius: 9px; background: linear-gradient(160deg, #f6e7c8, #d8e5d7); }
.crx-outfit:nth-child(2) { background: linear-gradient(160deg, #f6ddcc, #e3d6d9); }
.crx-outfit:nth-child(3) { background: linear-gradient(160deg, #d6e0e8, #ded9ea); }
.crx-outfit canvas { width: 65px; height: 88px; }
.crx-outfit strong { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; color: #304b43; }
.crx-outfit button { min-height: 30px; padding: 4px 7px; border: 1px solid #668675; border-radius: 6px; background: #355d50; color: #fff0d0; font-size: 10px; font-weight: 800; }
.crx-outfit .crx-outfit-save { background: #f9f0dd; color: #355d50; }
.crx-outfit small { min-height: 30px; display: grid; align-items: center; color: #536756; font-size: 10px; }
.crx-outfit .crx-outfit-delete { position: absolute; top: 3px; right: 3px; min-height: 24px; width: 24px; padding: 0; border: 0; background: transparent; color: #624347; font-size: 18px; }
#builder { position: absolute; z-index: 4; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(820px, calc(100% - 20px)); max-height: 45%; overflow: auto; padding: 10px; border: 1px solid #afad89; border-radius: 12px; background: #f6ecd5f7; color: #28463e; box-shadow: 0 8px 30px #11292d70; }
#builder[hidden] { display: none; }
.builder-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.builder-head strong { display: block; margin-top: 3px; font-size: 15px; }
.builder-head .door-kicker { font-size: 8px; color: #547765; }
#builder button { min-height: 32px; border: 1px solid #9eae95; border-radius: 6px; background: #fdf6e5; color: #315446; font-size: 11px; font-weight: 800; }
#builder .builder-done, #builder [data-build-place] { padding: 5px 12px; background: #3c6756; border-color: #3c6756; color: #fff2d4; }
#builder [data-build-place]:disabled { opacity: .5; }
.builder-controls { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 8px 0; }
.builder-controls p { margin: 0; font-size: 11px; }
.builder-controls > div { display: flex; flex: none; gap: 5px; }
.builder-controls button { padding: 4px 8px; }
.builder-shelf { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; align-items: center; }
.builder-shelf input { width: 100%; min-height: 34px; border: 1px solid #a0b09a; border-radius: 6px; background: #fffbef; color: #315446; font-size: 11px; padding: 7px; }
.builder-items { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 3px; }
.builder-items button { flex: 0 0 77px; display: grid; justify-items: center; padding: 3px; }
.builder-items canvas { width: 65px; height: 43px; }
.builder-items small { max-width: 69px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.builder-items p { margin: 4px; font-size: 11px; }
#builder .builder-items .is-selected { background: #d8e7d6; border-color: #426e58; box-shadow: 0 0 0 1px #426e58 inset; }
.is-building :is(.room-panels, #infostand, #gamesBox, #voteBar) { display: none !important; }
#app .friends-club, #app .friends-club .win-body { background: #f4ecd6; color: #29483f; }
#app .friends-club .win-head { background: #34564b; color: #fff1cf; border-color: #a9976e; }
.friends-heading { padding: 3px 2px 13px; }
.friends-heading .door-kicker { color: #59745f; }
.friends-heading h3 { margin: 4px 0; font: 800 31px/1 "Bricolage Grotesque", Manrope, sans-serif; letter-spacing: -.045em; color: #29483f; }
.friends-heading p { margin: 6px 0 0; color: #59745f; font-size: 11px; }
#app .friends-club .frow { background: #fffae9; border: 1px solid #c5c8ad; border-radius: 9px; padding: 7px; }
.friends-club .frow.is-online { border-left: 3px solid #619d77; }
.friends-club .frow canvas { flex: none; width: 39px; height: 52px; border-radius: 6px; background: #dce5d1; }
.friends-club .fr-main { min-width: 0; flex: 1; }
.friends-club .fr-main b { overflow-wrap: anywhere; }
.friends-club .fr-main small { color: #5c725d; }
.friends-club .fr-act { flex-wrap: wrap; justify-content: flex-end; }
.friends-club [data-follow] { background: #3d6d58; border-color: #3d6d58; color: #fff2d3; }
.crx .crx-tabs button[data-tab="staff"] { background: #692b46; border-color: #4a2439; color: #ffdfa2; }
.crx .crx-tabs button[data-tab="staff"].on { border-color: #b58155; box-shadow: 0 0 0 1px #edc083 inset; }
.crx .crx-panel h4 { color: #3b665d; }
.crx-staff {
  padding: 12px;
  border: 1px solid #ad8461;
  border-radius: 10px;
  background: linear-gradient(105deg, #632d47, #302033);
  color: #ffebc8;
}
.crx-staff .door-kicker { color: #ecc78f; }
.crx-staff-outfits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.crx-staff-outfits button {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: 3px;
  padding: 5px 7px 9px;
  border: 1px solid #a77e5d;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 35%, #86566d, #47283d 68%);
  color: #fff0d3;
}
.crx-staff-outfits button:nth-child(2) { background: radial-gradient(ellipse at 50% 35%, #477d78, #233b42 68%); }
.crx-staff-outfits button:hover, .crx-staff-outfits button[aria-pressed="true"] { border-color: #ffd695; }
.crx-staff-outfits button[aria-pressed="true"] { box-shadow: 0 0 0 1px #ffd695 inset; }
.crx-staff-outfits canvas { width: 74px; height: 92px; }
.crx-staff-outfits strong { font-size: 13px; }
.crx-staff-outfits small, .crx-staff p { font-size: 11px; line-height: 1.4; }
.crx-staff p { margin: 9px 0 0; color: #f4d9c5; }
.crx .crx-opt.admin-option { border-color: #ad8461; background: radial-gradient(ellipse at 50% 25%, #f9e6be, #d9b4a9); }
.crx .crx-opt.admin-option.on { border-color: #775068; box-shadow: 0 0 0 1px #775068 inset; }
.crx .crx-opt.admin-option .star { color: #763652; text-shadow: none; }
.crx-presets + h4 { margin: 8px 0; }
.showroom canvas {
  background: linear-gradient(0deg, #142930a3, #14293016),
    #243944 url('../assets/game/scenes/lobby-illustrated.webp') center 28% / cover;
}
#showroom-dance[aria-pressed="true"] { background: #c6ded2; border-color: #517d6e; }
@media (max-width: 700px) {
  #screen-creator { align-items: flex-start; }
  #screen-creator .cr-wrap { padding: 13px; }
  .crx .crx-left { display: grid; grid-template-columns: 106px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; gap: 6px 8px; }
  .crx .crx-stage { grid-column: 1; grid-row: 1 / 4; height: 135px; border-width: 2px; border-radius: 12px; }
  .crx .crx-podium { width: 76px; height: 20px; bottom: 8px; border-width: 2px; }
  .crx .crx-ctrl { grid-column: 2; grid-row: 2; gap: 3px; }
  .crx .crx-ctrl .rb { width: 28px; height: 32px; flex: none; font-size: 15px; border-radius: 8px; }
  .crx .crx-motion { min-width: 62px; width: 66px; font-size: 11px; padding-inline: 2px; }
  .crx .crx-left .cr-name { grid-column: 2; grid-row: 1; font-size: 15px; overflow-wrap: anywhere; }
  .crx .crx-motto { grid-column: 2; grid-row: 3; min-width: 0; padding-inline: 6px; font-size: 10px; }
  .crx .crx-motto input { width: 100%; font-size: 11px; }
  #win-look .win-body { overflow: hidden; padding: 9px; }
  #win-look .crx { height: min(610px, calc(100dvh - 205px)); min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; }
  #win-look .crx-right { min-height: 0; gap: 8px; }
  #win-look .crx-panel { flex: 1; min-height: 0; height: auto; }
  #win-look .crx-right > .btnrow { margin: 0; }
  #win-look .crx-right > .btnrow .btn { padding-block: 7px; font-size: 16px; }
  .crx-wardrobe h3 { font-size: 20px; }
  .crx-wardrobe > p { margin-block: 6px 9px; font-size: 10px; }
  .crx-outfit { gap: 4px; padding: 6px 4px; }
  .crx-outfit canvas { width: 50px; height: 67px; }
  .crx-outfit small { min-height: 17px; }
  .crx-tabs.has-outfits, .crx-tabs.has-staff { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .builder-controls { align-items: flex-start; flex-direction: column; }
  .builder-controls > div { align-self: flex-end; }
  .builder-shelf { grid-template-columns: 1fr; gap: 4px; }
  #builder { max-height: 43%; padding: 8px; }
  .builder-head strong { font-size: 13px; }
  .builder-shelf input { min-height: 29px; }
}
.door-entry .fld[hidden] { display: none; }

/* Yhtenäinen typografia: otsikot ja isot painikkeet käyttävät samaa fonttia kuin etusivu. */
h1, h2, h3, .win-title, .ri-name, .gcard b, .hcard h3, .btn.big { font-family: "Bricolage Grotesque", Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; }
button, input, select, textarea { font-family: inherit; }
.door-copy h1 { letter-spacing: -.045em; }
/* Etusivun esittely ja lakisivulinkit */
.door-how { margin: clamp(28px, 5vw, 56px) 0 8px; }
.door-how h2 { margin: 0 0 16px; color: #fff1dc; font: 800 clamp(26px, 3.2vw, 38px)/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -.035em; }
.door-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: how; }
.door-how li { counter-increment: how; border: 1px solid #f6e8cc30; border-radius: 14px; padding: 18px 18px 20px; background: #ffffff08; display: grid; gap: 6px; }
.door-how li::before { content: counter(how, decimal-leading-zero); color: #ff9d6c; font: 700 11px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.door-how li strong { color: #fff1dc; font: 800 19px/1.2 "Bricolage Grotesque", sans-serif; }
.door-how li span { color: #d8ccba; font-size: 14.5px; line-height: 1.55; }
.door-how > p { margin: 14px 0 0; color: #b9ad9c; font-size: 14px; }
.door-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.door-legal { display: flex; gap: 18px; }
.door-legal a { color: #e9d8bd; text-decoration: none; }
.door-legal a:hover, .door-legal a:focus-visible { color: #ffb27a; text-decoration: underline; }
@media (max-width: 760px) { .door-how ol { grid-template-columns: 1fr; } }
.door-copy h1 { letter-spacing: -.03em; }
.home-hero h1 { letter-spacing: -.03em; }
.home-collectible-copy strong { hyphens: auto; overflow-wrap: normal; }