.scene-controls { position: fixed; inset: 0; z-index: 160; pointer-events: none; font-family: "Trebuchet MS", "Arial Rounded MT Bold", "Microsoft YaHei", sans-serif; }
.scene-controls__logo { position: absolute; top: clamp(14px, 2.2vh, 26px); left: clamp(78px, 7.2vw, 116px); width: clamp(134.4px, 11.4vw, 211.2px); height: auto; filter: drop-shadow(0 7px 7px rgba(62,36,22,.24)); }
.scene-controls__languages { position: absolute; top: clamp(18px, 3vh, 34px); right: clamp(18px, 2.6vw, 50px); display: flex; gap: clamp(6px,.65vw,12px); pointer-events: auto; }
.scene-controls__language-button { min-width: clamp(54px,4.5vw,78px); min-height: clamp(44px,4.2vw,68px); padding: 8px 10px; border: 3px solid #a95e24; border-radius: 18px; color: #4b2c1d; background: linear-gradient(180deg,#ffd981,#eca94c); box-shadow: inset 0 3px 0 rgba(255,255,255,.45),0 5px 0 #824419,0 8px 12px rgba(61,36,20,.22); font-size: clamp(15px,1.25vw,22px); font-weight: 900; cursor: pointer; }
.scene-controls__language-button.is-active { color:#fff; border-color:#285d30; background:linear-gradient(180deg,#78c85a,#409645); box-shadow:inset 0 3px 0 rgba(255,255,255,.32),0 5px 0 #285d30,0 8px 12px rgba(61,36,20,.22); }
.scene-controls__navigation { position:absolute; bottom:calc(clamp(10px,1.8vh,20px) + 15px); left:50%; display:flex; gap:clamp(8px,.8vw,12px); align-items:flex-end; transform:translateX(-50%); pointer-events:auto; }
.scene-controls__render-shell {
  position: relative;
}

.scene-controls__render-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 20;
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  min-width: 132px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 14px;
  background: rgba(62,36,22,.94);
  box-shadow: 0 12px 22px rgba(62,36,22,.22);
  transform: translateX(-50%);
  pointer-events: auto;
}

.scene-controls__render-menu[hidden] {
  display: none;
}

.scene-controls__render-option {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  min-width: 124px;
  min-height: 38px;
  padding: 6px 10px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 11px;
  color: #fff;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.14), 0 4px 0 rgba(27,12,7,.7);
}

.scene-controls__render-option.is-active {
  border-color: #fff7dc;
  color: #fff;
  background: linear-gradient(180deg, #f4af72, #db6846);
}

.scene-controls__render-option .scene-controls__render-icon {
  display: inline-flex;
  width: 1.2em;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.scene-controls__button--render-settings {
  background: linear-gradient(180deg,#f5a85b,#d95f4a);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.34),0 5px 0 #aa4437,0 8px 14px rgba(62,36,22,.22);
}

.scene-controls__button--render-settings svg {
  width: 48%;
}

.scene-controls__button { position:relative; display:grid; width:clamp(48px,4.3vw,66px); aspect-ratio:1; padding:0; border:3px solid rgba(255,255,255,.95); border-radius:50%; place-items:center; color:#fff; background:linear-gradient(180deg,#f79562,#df654d); box-shadow:inset 0 3px 0 rgba(255,255,255,.38),0 5px 0 #a84539,0 8px 14px rgba(62,36,22,.22); cursor:pointer; text-decoration:none; }
.scene-controls__button svg { width:54%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.3; }
.scene-controls__button--hierarchy svg { width:58%; height:58%; }
.scene-controls__button--hierarchy svg path { stroke-width: 2.8; }
.scene-controls__button--hierarchy { font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.scene-controls__button--sound { background:linear-gradient(180deg,#69b7d6,#3d87af); box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 5px 0 #28627f,0 8px 14px rgba(62,36,22,.22); }
.scene-controls__button--sound svg { fill:currentColor; }
.scene-controls__button--fullscreen { background:linear-gradient(180deg,#8bca62,#579c44); box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 5px 0 #3e7636,0 8px 14px rgba(62,36,22,.22); }
.scene-controls__button::after { position:absolute; bottom:calc(100% + 10px); left:50%; padding:7px 11px; border:2px solid rgba(255,255,255,.92); border-radius:12px; color:#fff; content:attr(data-tooltip); background:rgba(62,36,22,.9); box-shadow:0 4px 10px rgba(62,36,22,.22); font-size:clamp(12px,1vw,15px); font-weight:700; line-height:1.2; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity 140ms ease,transform 140ms ease; visibility:hidden; white-space:nowrap; }
.scene-controls__button:focus-visible::after { opacity:1; transform:translate(-50%,0); visibility:visible; }
@media (hover:hover) { .scene-controls__button:hover::after { opacity:1; transform:translate(-50%,0); visibility:visible; } }
.scene-controls__button:focus-visible,.scene-controls__language-button:focus-visible { outline:4px solid #fff; outline-offset:4px; }
.scene-controls__fullscreen-exit { display:none; }
.scene-controls__button--fullscreen.is-active .scene-controls__fullscreen-enter { display:none; }
.scene-controls__button--fullscreen.is-active .scene-controls__fullscreen-exit { display:block; }
.scene-controls__button--sound:not(.is-playing) .scene-controls__sound-wave { opacity:.35; }
.scene-controls__button--sound.is-playing .scene-controls__sound-muted { display:none; }
.scene-controls__feedback { position:absolute; bottom:calc(clamp(10px,1.8vh,20px) + 88px); left:50%; margin:0; padding:8px 14px; border:2px solid rgba(255,255,255,.9); border-radius:999px; color:#fff; background:rgba(62,36,22,.82); box-shadow:0 4px 10px rgba(62,36,22,.22); font-size:clamp(12px,1vw,15px); font-weight:700; transform:translateX(-50%); }