/* Fit the scene to the visible browser without restricting user zoom. */
html,body { width:100%;min-width:0;overflow-x:clip; }
.stage { height:100svh;height:100dvh;min-height:0;overflow:clip; }
.brand { top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left)); }
.music-player { bottom:max(12px,env(safe-area-inset-bottom)); }
@media (max-width:699px), (max-aspect-ratio:9/10) {
  .room { width:140%;height:114%;left:-20%; }
  .avatar-wrap { height:auto;width:min(58vw,38svh);bottom:21%; }
  .platform-badge { width:min(61vw,40svh);bottom:15%; }
  .brand { font-size:9px;letter-spacing:1px;gap:7px; }
  .preview-label { top:max(28px,env(safe-area-inset-top));right:14px;font-size:6px;letter-spacing:.8px; }
  .scene-heading { top:13%;font-size:7px;letter-spacing:1.1px; }
  .cards-deployed-content .card { top:44%; }
  .curve-left .peek-label { width:34%;left:0; }
  .curve-right .peek-label { width:34%;right:0; }
  .peek-label { font-size:clamp(11px,2.65vw,15px);gap:7px;line-height:1.25; }
  .peek-icon { width:26px;height:26px; }
  .merch-card .peek-label { width:34%;font-size:clamp(10px,2.5vw,14px); }
  .merch-card .peek-label>span:last-child { padding:10px 2px; }
  .cards-deployed-content .card-shell { padding:16px; }
  .deployed-card { grid-template-columns:38px minmax(0,1fr) 12px;gap:12px; }
  .deployed-icon { width:38px;height:38px;padding:8px; }
  .deployed-title { font-size:clamp(13px,3.4vw,18px); }
  .deployed-desc { font-size:clamp(11px,2.7vw,14px);line-height:1.45; }
  .deployed-arrow { display:block;font-size:15px; }
  .deployed-copy { gap:7px; }
  .tng-card .card-shell { padding:14px; }
  .tng-qr { width:auto;max-width:100%;max-height:calc(64svh - 150px);flex-shrink:1;min-height:0; }
  .save-qr { min-height:44px;flex-shrink:0;font-size:13px; }
  .qr-card-content { min-height:0;gap:6px; }
  .qr-card-content strong { font-size:16px; }
  .qr-card-note { font-size:10px; }
  .gaming-player { width:min(440px,calc(100% - 24px));grid-template-columns:44px minmax(0,1fr) 40px;padding:10px 12px;gap:10px; }
  .music-toggle { width:44px;height:44px; }
  .gaming-track strong { font-size:12px;letter-spacing:1px; }
  .gaming-artist { font-size:7px; }
  .gaming-seek { margin-top:10px;font-size:9px; }
  .gaming-volume button { width:32px;height:28px; }
  .gaming-player input[type=range]::-webkit-slider-thumb { width:12px;height:12px; }
}
@media (max-height:500px) and (min-aspect-ratio:10/9) {
  .brand { top:10px;font-size:8px; }
  .brand b { padding:5px; }
  .preview-label { top:16px; }
  .scene-heading { top:7%;font-size:6px; }
  .avatar-wrap { height:65%;bottom:23%;width:auto; }
  .platform-badge { bottom:17%;width:24%; }
  .gaming-player { bottom:max(6px,env(safe-area-inset-bottom));width:340px;padding:7px 12px;gap:10px;grid-template-columns:34px minmax(0,1fr) 40px; }
  .music-toggle { width:34px;height:34px; }
  .gaming-track strong { font-size:10px; }
  .gaming-artist { margin-top:2px;font-size:6px; }
  .gaming-seek { margin-top:5px;font-size:7px; }
  .gaming-volume { gap:3px; }
  .peek-label { font-size:10px;gap:3px; }
  .peek-icon { width:18px;height:18px; }
  .merch-card .peek-label { font-size:10px; }
  .merch-card .peek-label>span:last-child { padding-bottom:4px; }
  .qr-card-content { gap:3px;min-height:0; }
  .tng-card .card-shell { padding:8px; }
  .tng-qr { width:auto;max-width:100%;max-height:calc(62svh - 100px);min-height:0; }
  .qr-card-note,.qr-save-status { display:none; }
  .save-qr { padding:5px;font-size:10px; }
}

@media(max-width:380px) {
  .card:nth-child(2) .peek-label { width:43%;font-size:10px;letter-spacing:-.3px; }
  .preview-label { font-size:5px; }
}

/* A readable identity bar above the gaming scene. */
.stage::before{content:'';position:absolute;inset:0 0 auto;height:110px;z-index:50;pointer-events:none;background:linear-gradient(#070708e8,#07070888 55%,transparent)}
.brand{top:max(18px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));gap:10px;letter-spacing:0;padding:0;z-index:60}
.brand img{display:block;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 8px #ff33443b)}
.brand-copy{display:flex;flex-direction:column;gap:5px}
.brand-copy strong{font-size:14px;font-weight:800;letter-spacing:1.7px;line-height:1.15;color:#fff}
.brand-copy small{font-size:8px;letter-spacing:2px;color:#e6919a;line-height:1.2;font-weight:600}
.scene-heading{top:8%;display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:1.6px;border:1px solid #ff5c7140;border-radius:30px;background:linear-gradient(120deg,#280f16dd,#0d0c0edd);box-shadow:0 4px 18px #0005,inset 0 1px #ffffff0a;text-shadow:none;z-index:55}
.scene-heading::before{content:'';width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#ff465e;box-shadow:0 0 9px #ff465ecc}
@media(max-width:699px),(max-aspect-ratio:9/10){
 .brand{left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));gap:9px}
 .brand img{width:42px;height:42px}
 .brand-copy strong{font-size:13px;letter-spacing:1.2px}
 .brand-copy small{font-size:8px;letter-spacing:1.6px}
 .scene-heading{top:13%;padding:8px 12px;font-size:9px;letter-spacing:1px;max-width:calc(100% - 32px)}
}
@media(max-height:500px) and (min-aspect-ratio:10/9){
 .stage::before{height:70px}
 .brand{top:8px;left:14px;gap:7px}
 .brand img{width:32px;height:32px}
 .brand-copy strong{font-size:11px;letter-spacing:1px}
 .brand-copy small{font-size:7px;letter-spacing:1px}
 .scene-heading{top:5%;padding:5px 10px;font-size:8px}
}

/* Selected background D: restrained esports corner graphics. */
.room{width:100%;height:100%;left:0;object-fit:fill}
.room-shade{background:radial-gradient(ellipse at 50% 38%,#ffffff03,transparent 60%)}
.stage::before{background:linear-gradient(#080809ad,transparent)}
.pedestal,.pedestal-front{display:block;width:36%;height:7%;bottom:18.5%;background:linear-gradient(#303033,#101012 65%)}
.pedestal{box-shadow:0 7px 0 #0a0a0b,0 9px 0 #e52a40,0 16px 28px #0009}
.pedestal::before{box-shadow:none;border-color:#ffffff25;background:radial-gradient(ellipse,#29292c,#171719 70%)}
.pedestal-front{background:linear-gradient(transparent 42%,#171719 90%);border-left-color:#ffffff33;border-right-color:#ffffff33;border-bottom:2px solid #f4354d;box-shadow:0 5px 12px -5px #ff2944aa}
@media(max-width:699px),(max-aspect-ratio:9/10){.room{width:100%;height:100%;left:0}.pedestal,.pedestal-front{width:74%;bottom:19%;height:7%}}
@media(max-height:500px) and (min-aspect-ratio:10/9){.pedestal,.pedestal-front{bottom:20%;width:32%;height:7%}}

.brand{padding:7px 12px 7px 7px;border:1px solid #ffffff18;border-radius:10px;background:#0a0a0bdf;box-shadow:0 4px 16px #0003}
@media(max-height:500px) and (min-aspect-ratio:10/9){.brand{padding:3px 8px 3px 3px}}

/* Match the Energy background floor horizon to the avatar platform. */
.room{width:100%;height:125%;left:0;object-fit:fill}

/* Portrait screens frame the quiet center; armor stays at the outer edges. */
@media(max-width:699px),(max-aspect-ratio:9/10){
 .room{width:185%;max-width:none;left:-42.5%;height:125%;filter:brightness(.78) saturate(.8)}
 .room-shade{background:linear-gradient(180deg,#07070955 0%,#08080b18 45%,#08080b33 100%)}
}