/* SPACE_EMPIRE_V43_SHOWROOM — vitrine interactive */
.sr { position: fixed; inset: 0; z-index: 900; background: #02050a; color: #e6f4ff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; user-select: none; }
.sr[hidden] { display: none; }
.sr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.sr-canvas:active { cursor: grabbing; }
.sr-head { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.sr-head > div { display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.sr-sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #7fe8ff; }
.sr-title { font-size: clamp(22px, 3.2vw, 38px); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; }
.sr-close { pointer-events: auto; width: 44px; height: 44px; border: 1px solid rgba(127,232,255,.35); background: rgba(4,14,26,.7); color: #fff; font-size: 18px; cursor: pointer; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.sr-close:hover { background: rgba(95,212,255,.2); }
.sr-specs { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; width: 190px; }
.sr-specs[hidden] { display: none; }
.sr-specs div { padding: 7px 10px; background: linear-gradient(90deg, rgba(4,16,30,.78), rgba(4,16,30,.1)); border-left: 2px solid #5fd4ff; }
.sr-specs small { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8fb3c9; }
.sr-specs b { font-size: 15px; font-weight: 600; }
.sr-bar { position: absolute; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; background: rgba(3,10,20,.72); border: 1px solid rgba(127,232,255,.22); backdrop-filter: blur(6px); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.sr-bar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 7px 8px; background: transparent; border: 1px solid transparent; color: #9fbdd0; font-size: 17px; cursor: pointer; }
.sr-bar button span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.sr-bar button:hover { color: #fff; border-color: rgba(127,232,255,.3); }
.sr-bar button.on { color: #fff; background: rgba(95,212,255,.16); border-color: rgba(127,232,255,.55); box-shadow: inset 0 -2px 0 #5fd4ff; }
.sr-bar button.flash { background: rgba(255,255,255,.6); }
.sr-hint .m { display: none; }
.sr-hint { position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: 11px; color: rgba(180,210,230,.6); letter-spacing: .06em; }
.hg-vitrine { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(95,212,255,.18); border: 1px solid rgba(127,232,255,.55); cursor: pointer; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.hg-vitrine:hover { background: rgba(95,212,255,.35); }
.hull-thumb { cursor: zoom-in; }
@media (max-width: 760px), (pointer: coarse) {
  .sr-specs { top: calc(88px + env(safe-area-inset-top, 0px)); transform: none; display: flex; gap: 6px; width: calc(100vw - 36px); overflow-x: auto; scrollbar-width: none; }
  .sr-specs div { flex: 0 0 auto; padding: 4px 8px; }
  .sr-specs b { font-size: 13px; }
  .sr-hint .d { display: none; } .sr-hint .m { display: inline; }
  .sr-bar { bottom: calc(34px + env(safe-area-inset-bottom, 0px)); justify-content: flex-start; }
  .sr-bar button { min-width: 54px; font-size: 16px; }
  .sr-hint { font-size: 10px; }
}