#showroomCanvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; touch-action:none; }
body.showroom { background:#151718; }
.showroom #table { background:transparent; }
.showroom-walking #table, .showroom-walking .theme-switch { visibility:hidden; pointer-events:none; }
.showroom .corner-gallery, .showroom .corner-favorites, .showroom .gallery-view-toggle, .showroom .wallet-search-toggle, .showroom .gallery-toolbar, .showroom .gallery-header { display:none !important; }
.showroom #galleryPanel, .showroom .gallery-panel, .showroom #binderPanel { background:transparent !important; }
#showroomHud { position:fixed; inset:0; z-index:20; pointer-events:none; font:14px/1.5 system-ui,sans-serif; color:#eee; }
#showroomHud button, #showroomHud a { pointer-events:auto; color:inherit; background:#202326e8; border:1px solid #ffffff30; border-radius:8px; padding:9px 14px; text-decoration:none; font:inherit; cursor:pointer; }
#showroomTop { position:absolute; top:20px; left:24px; right:24px; display:flex; align-items:center; gap:14px; }
#showroomTop span { margin-right:auto; text-shadow:0 1px 4px #000; }
#showroomHint { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); text-align:center; padding:12px 20px; border-radius:12px; background:#151719e8; width:max-content; max-width:85vw; }
#showroomCrosshair { position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%; background:white; box-shadow:0 0 0 1px #0009; transform:translate(-50%,-50%); }
.showroom:not(.showroom-walking) #showroomCrosshair, .showroom:not(.showroom-walking) #showroomEnter { display:none; }
.showroom-walking #showroomReturn { display:none; }
.showroom.is-light #showroomHud { color:#232323; }
.showroom.is-light #showroomHud button, .showroom.is-light #showroomHud a, .showroom.is-light #showroomHint { background:#f4f1e9ed; border-color:#0003; }
.showroom.is-light #showroomTop span { text-shadow:0 1px 4px #fff; }

.showroom .gallery-filter-controls { display:none !important; }

.showroom .theme-switch { display:none !important; }

.showroom:not(.showroom-walking) #showroomHint { display:none; }
/* Quiet gallery chrome; the collection remains the focal point. */
#showroomTop { top:28px; left:32px; right:32px; gap:10px; align-items:flex-start; }
#showroomTop .showroom-title { margin-right:auto; display:grid; gap:4px; }
#showroomTop .showroom-title small { font-size:9px; font-weight:600; letter-spacing:.2em; opacity:.55; }
#showroomTop .showroom-title strong { font-size:24px; font-weight:450; letter-spacing:-.055em; line-height:1.3; }
#showroomTop .showroom-title span { margin-top:4px; font-size:11px; letter-spacing:.025em; opacity:.58; text-shadow:none; }
#showroomHud { color:#e8e9ec; -webkit-font-smoothing:antialiased; }
#showroomHud button, #showroomHud a { border-radius:24px; padding:10px 17px; font-size:11px; font-weight:500; letter-spacing:.025em; border-color:#ffffff1a; background:#252a3273; backdrop-filter:blur(18px); box-shadow:0 4px 20px #0000000a; transition:background .18s, border-color .18s; }
#showroomHud button:hover, #showroomHud a:hover { background:#424953ab; border-color:#ffffff4d; }
#showroomHud button:focus-visible, #showroomHud a:focus-visible { outline:2px solid #c9b58c; outline-offset:4px; }
#showroomHint { bottom:26px; display:flex; align-items:center; gap:20px; border:1px solid #ffffff12; padding:7px 8px 7px 20px; border-radius:32px; background:#252a3273; backdrop-filter:blur(18px); font-size:11px; letter-spacing:.01em; }
#showroomEnter { background:#e5ddcf !important; color:#272a2c !important; }
#showroomCrosshair { width:4px; height:4px; opacity:.65; box-shadow:0 0 0 4px #ffffff09; }
.showroom.is-light #showroomHud { color:#333a40; }
.showroom.is-light #showroomHud button, .showroom.is-light #showroomHud a, .showroom.is-light #showroomHint { background:#f8f7f175; border-color:#282e3514; }
.showroom.is-light #showroomHud button:hover, .showroom.is-light #showroomHud a:hover { background:#ffffffb8; border-color:#282e3540; }
.showroom.is-light #showroomTop span { text-shadow:none; }
@media(max-width:600px) {
  #showroomTop { top:18px; left:18px; right:18px; gap:6px; }
  #showroomTop .showroom-title strong { font-size:19px; }
  #showroomHud button, #showroomHud a { padding:9px 12px; }
  #showroomHint { gap:8px; padding-left:14px; font-size:10px; }
  #showroomCount { max-width:150px; }
}

/* The showroom stays immersive; binder controls belong to the existing viewer. */
#showroomTop,
#showroomHint {
  display: none !important;
}

#showroomLeave {
  position: absolute;
  top: max(28px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
#showroomLeave[hidden] { display: none !important; }

#showroomTouchJoystick {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 118px;
  height: 118px;
  z-index: 23;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#showroomTouchJoystick[hidden],
.showroom:not(.showroom-walking) #showroomTouchJoystick { display:none !important; }
#showroomTouchJoystickBase {
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px solid #ffffff38;
  background:radial-gradient(circle at 38% 32%,#ffffff20,#13182066 68%);
  box-shadow:inset 0 0 24px #00000026,0 8px 30px #00000024;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#showroomTouchJoystickThumb {
  position:absolute;
  left:50%;
  top:50%;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid #ffffff6b;
  background:linear-gradient(145deg,#f0eadcdd,#aaa391c7);
  box-shadow:0 5px 18px #00000042,inset 0 1px 0 #ffffffb8;
  transform:translate(-50%,-50%);
  transition:transform 90ms ease-out,box-shadow 120ms ease;
  will-change:transform;
}
#showroomTouchJoystick.is-active #showroomTouchJoystickThumb {
  transition:none;
  box-shadow:0 3px 12px #00000055,inset 0 1px 0 #ffffffd0;
}
.showroom.is-light #showroomTouchJoystickBase {
  border-color:#242b3438;
  background:radial-gradient(circle at 38% 32%,#ffffff8c,#afb6be63 72%);
}
.showroom.is-light #showroomTouchJoystickThumb {
  border-color:#252b3266;
  background:linear-gradient(145deg,#fffdf4ed,#c9c5b8dc);
}
@media(max-width:600px) {
  #showroomTouchJoystick {
    left:max(14px,env(safe-area-inset-left));
    bottom:max(14px,env(safe-area-inset-bottom));
    width:108px;
    height:108px;
  }
}

#showroomHud #showroomOpenBinder {
  position:absolute;
  right:max(28px,env(safe-area-inset-right));
  bottom:max(28px,env(safe-area-inset-bottom));
  z-index:23;
  min-width:104px;
  min-height:52px;
  background:#e5ddcf;
  color:#272a2c;
  border-color:#ffffff80;
  font-size:15px;
  font-weight:600;
  touch-action:manipulation;
}
#showroomHud #showroomOpenBinder[hidden],
.showroom:not(.showroom-touch) #showroomOpenBinder,
.showroom:not(.showroom-walking) #showroomOpenBinder { display:none !important; }
.showroom.is-light #showroomHud #showroomOpenBinder {
  background:#252a32;
  color:#f8f7f1;
  border-color:#252a32;
}
@media(max-width:600px) {
  #showroomHud #showroomOpenBinder {
    right:max(18px,env(safe-area-inset-right));
    bottom:max(26px,env(safe-area-inset-bottom));
  }
}

/* Reuse the main site's switch only while the Escape menu is visible. */
.showroom.showroom-walking:has(#showroomLeave:not([hidden])) .theme-switch {
  display: inline-flex !important;
  visibility: visible;
  pointer-events: auto;
  z-index: 21;
}

.showroom-speech {
  position: fixed;
  z-index: 19;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 24px));
  padding: 17px 20px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 20px 20px 5px 20px;
  background: rgba(248,246,240,.96);
  color: #25272c;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  font: 15px/1.5 Georgia, 'Times New Roman', serif;
  pointer-events: none;
}
.showroom-speech[hidden] { display: none; }
.showroom-speech::after {
  content: '';
  position: absolute;
  left: var(--showroom-speech-tail-left, calc(100% - 27px));
  bottom: -12px;
  border-top: 12px solid rgba(248,246,240,.96);
  border-left: 15px solid transparent;
}

.showroom #shuffleButton { display:none !important; }
#showroomHand { position:fixed; inset:auto 0 0; height:220px; z-index:40; pointer-events:none; }
.showroom-hand-card { position:absolute; left:50%; bottom:-100px; width:144px; height:202px; padding:0; border:0; background:transparent; border-radius:8px; touch-action:none; cursor:grab; transform:translateX(calc(-50% + var(--hand-x))) rotate(var(--hand-angle)); transform-origin:50% 100%; z-index:var(--hand-order); transition:transform .18s ease,filter .18s ease; pointer-events:none; }
.showroom-hand-card img { width:100%; height:100%; object-fit:contain; border-radius:8px; filter:drop-shadow(0 4px 8px #0009); pointer-events:none; }
.showroom-walking.showroom-hand-interactive .showroom-hand-card { pointer-events:auto; }
.showroom-hand-card:hover, .showroom-hand-card:focus-visible { transform:translateX(calc(-50% + var(--hand-x))) translateY(-108px) rotate(0deg) scale(1.12); z-index:100; }
.showroom:not(.showroom-walking) #showroomHand { opacity:0; }
.showroom-hand-flight { position:fixed; z-index:1000; pointer-events:none; object-fit:contain; transform-origin:0 0; border-radius:8px; }
.showroom-hand-transfer #cardCanvas { opacity:0; }
#showroomHandStatus { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(prefers-reduced-motion:reduce) { .showroom-hand-card { transition:none; } }

.showroom-hand-view #showroomReturn { display:none !important; }

#showroomHandReturnZone {
  position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom));
  width:164px; height:222px; box-sizing:border-box; border:1px dotted currentColor; border-radius:14px;
  color:#eee; display:flex; align-items:center; justify-content:center;
  font:13px/1.4 system-ui,sans-serif; text-align:center; pointer-events:none; z-index:41;
}
#showroomHandReturnZone[hidden] { display:none; }
.is-light #showroomHandReturnZone { color:#25272c; }
#showroomHandReturnZone.is-over { background:rgba(255,255,255,.09); }
.is-light #showroomHandReturnZone.is-over { background:rgba(0,0,0,.07); }

.showroom-hand-choosing .showroom-hand-card { bottom:-35px; transform:translateX(calc(-50% + var(--hand-x))) rotate(var(--hand-angle)); }
.showroom-hand-choosing .showroom-hand-card:hover,.showroom-hand-choosing .showroom-hand-card:focus-visible { transform:translateX(calc(-50% + var(--hand-x))) translateY(-45px) scale(1.08); }

/* Showroom is dark-only, including the released-control HUD. */
.showroom .theme-switch { display:none !important; visibility:hidden !important; }
#showroomChat {position:fixed;left:20px;bottom:20px;display:flex;gap:7px;align-items:center;pointer-events:auto;z-index:60;max-width:calc(100vw - 104px);}
#showroomChat[hidden]{display:none;}
#showroomChat input {width:min(320px,calc(100vw - 160px));min-width:0;padding:12px 15px;border:1px solid #424751;border-radius:12px;background:#20242dec;color:#fff;font:14px system-ui;outline:none;}
#showroomChat input:focus{border-color:#929bac;}
#showroomChat button {border:1px solid #424751;border-radius:11px;background:#292f39;color:#fff;width:42px;height:42px;min-width:42px;flex:0 0 42px;padding:0;display:grid;place-items:center;line-height:1;box-sizing:border-box;cursor:pointer;}
.showroom-chat-log {position:absolute;bottom:calc(100% + 12px);left:0;width:100%;max-height:min(35vh,260px);overflow-y:auto;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;scrollbar-color:#555c68 transparent;}
.showroom-chat-message {align-self:flex-start;max-width:100%;box-sizing:border-box;flex-shrink:0;padding:9px 13px;border:1px solid #424751;border-radius:12px;background:#20242dec;color:#eee;font:14px/1.4 system-ui;overflow-wrap:anywhere;white-space:pre-wrap;}
.showroom-chat-feedback {position:absolute;top:calc(100% + 2px);color:#ddd;font:12px system-ui;}

#showroomHud #showroomFavorites {position:fixed;right:20px;bottom:20px;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid #424751;border-radius:12px;background:#20242dec;color:#fff;cursor:pointer;pointer-events:auto;z-index:60;}
#showroomFavorites[hidden]{display:none;}
#showroomFavorites:hover,#showroomFavorites:focus-visible{background:#353c49;border-color:#929bac;}

#showroomFavoritesEmpty {position:fixed;right:20px;bottom:76px;max-width:min(280px,calc(100vw - 40px));padding:15px 18px;background:#20242df5;color:#eee;border:1px solid #555d6a;border-radius:12px;font:14px/1.5 system-ui;pointer-events:auto;z-index:65;}
#showroomFavoritesEmpty[hidden]{display:none;}
.showroom-hand-card.is-presented {transform:translateX(calc(-50% + var(--hand-x))) translateY(-108px) rotate(0deg) scale(1.12);z-index:100;}
.showroom-player-chat {position:fixed;z-index:80;width:max-content;max-width:min(280px,calc(100vw - 16px));box-sizing:border-box;padding:9px 13px;border:1px solid #687181;border-radius:13px;background:#181e28f5;color:#fff;box-shadow:0 3px 14px #0006;font:14px/1.4 system-ui;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;}
.showroom-player-chat[hidden]{display:none;}

#showroomFavorites svg {display:block;transform:translateY(.5px);}

.showroom-chat-message.is-own {align-self:flex-start;max-width:88%;background:#303b50ed;border-bottom-left-radius:4px;}
.showroom-chat-message.is-other {align-self:flex-end;max-width:88%;border-bottom-right-radius:4px;}

.showroom-typing {display:flex;align-items:center;gap:5px;padding:12px 14px;}
.showroom-typing i {display:block;width:6px;height:6px;background:#eee;border-radius:50%;animation:showroom-typing-dot 1.2s ease-in-out infinite;}
.showroom-typing i:nth-child(2) {animation-delay:.15s;}
.showroom-typing i:nth-child(3) {animation-delay:.3s;}
@keyframes showroom-typing-dot {0%,60%,100% {opacity:.35;transform:translateY(0);}30% {opacity:1;transform:translateY(-3px);}}
@media(prefers-reduced-motion:reduce){.showroom-typing i {animation:none;opacity:.7;}}