/* ALMA · the shared-build page (SITEKIT): views/share.ejs. A slim HUD bar over the build; the build owns the rest
   of the screen. The bar slides down once with a gold sweep, votes pop, the phone overflow menu unfolds.
   On top of game-system.css and site.css (it no longer loads studio.css or studio-ui.css). */

.sh-body { overflow: hidden; height: 100vh; height: 100dvh; background: var(--void); }
.sh-body .site { height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.sh-body.is-missing { overflow: auto; }
.sh-body.is-missing .site { height: auto; min-height: 100vh; min-height: 100dvh; }

/* --- the bar ---------------------------------------------------------------------------------------- */
.sh-bar { position: relative; z-index: 30; display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 14px; background: oklch(0.11 0.024 262 / 0.96); box-shadow: inset 0 -1px 0 var(--line); backdrop-filter: blur(14px); animation: sh-down 0.62s var(--ease-panel) both; }
@keyframes sh-down { from { transform: translateY(-100%); opacity: 0; } }
.sh-sweep { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; pointer-events: none; }
.sh-sweep::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--gold) 8%, transparent 16%); transform: translateX(-16%); opacity: 0; animation: sh-sweep 2.4s var(--ease-soft) 0.45s both; }
@keyframes sh-sweep { 15% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.sh-brand { flex: none; }
.sh-brand .brand-text { font-size: 18px; }
.sh-sep { width: 1px; height: 22px; background: var(--line-2); flex: none; }
.sh-title { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 17px/1.2 var(--f-display); color: var(--fg); }
.sh-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 11px/1 var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; cursor: help; }
.sh-pill .ico { width: 13px; height: 13px; }
.sh-pill.is-public { color: var(--good); box-shadow: inset 0 0 0 1px oklch(0.80 0.12 165 / 0.45); }
.sh-pill.is-private { color: var(--gold); box-shadow: inset 0 0 0 1px oklch(0.85 0.09 85 / 0.45); }
.sh-pill:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.sh-spacer { flex: 1 1 auto; min-width: 8px; }
.sh-make { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-decoration: none; white-space: nowrap; }
.sh-make .ico { width: 15px; height: 15px; transition: transform var(--t-quick); }
.sh-make:hover .ico, .sh-make:focus-visible .ico { transform: translateX(3px); }
.sh-make:focus-visible { outline: none; box-shadow: 0 1px 0 var(--gold); }

.sh-ai { display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 0; }
.sh-chip { --cut: 5px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; background: oklch(0.15 0.03 262 / 0.9); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); font: 500 12.5px/1 var(--f-body); white-space: nowrap; text-decoration: none; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.sh-chip .ico { width: 14px; height: 14px; flex: none; color: var(--gold); }
.sh-chip b { font-weight: 600; color: var(--fg); }
.sh-chip.is-on { color: var(--fg); box-shadow: inset 0 0 0 1px oklch(0.85 0.09 85 / 0.5); background: var(--gold-tint); }
.sh-chip.is-button { cursor: pointer; font: 600 11.5px/1 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t-quick); }
.sh-chip.is-button:hover { background: var(--gold-tint); }
.sh-chip.is-button:disabled { opacity: 0.5; cursor: progress; }
a.sh-chip { flex: none; }
a.sh-chip:hover { color: var(--fg); background: var(--gold-tint); }
.sh-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.sh-short { display: none; }

.sh-votes { display: inline-flex; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
.sh-vote { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; background: transparent; color: var(--fg-2); font: 600 12.5px/1 var(--f-label); font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--t-quick), background var(--t-quick); }
.sh-vote + .sh-vote { box-shadow: inset 1px 0 0 var(--line); }
.sh-vote .ico { width: 15px; height: 15px; }
.sh-vote:hover { color: var(--fg); background: var(--gold-tint); }
.sh-vote[data-vote="1"][aria-pressed="true"] { color: var(--good); background: oklch(0.80 0.12 165 / 0.12); }
.sh-vote[data-vote="-1"][aria-pressed="true"] { color: var(--bad); background: oklch(0.74 0.14 25 / 0.12); }
.sh-vote:disabled { cursor: progress; }
.sh-vote.is-pop .ico { animation: sh-pop 0.46s var(--ease-spring); }
.sh-vote.is-pop [data-count] { display: inline-block; animation: sh-tick 0.4s var(--ease-panel); }
.sh-vote.is-pop::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: inset 0 0 0 1px currentColor; transform: rotate(45deg); opacity: 0; animation: sh-ring 0.6s var(--ease-soft); pointer-events: none; }
@keyframes sh-pop { 40% { transform: scale(1.35) rotate(-8deg); } }
@keyframes sh-tick { from { transform: translateY(-6px); opacity: 0; } }
@keyframes sh-ring { 0% { opacity: 0.8; transform: rotate(45deg) scale(0.5); } 100% { opacity: 0; transform: rotate(45deg) scale(1.5); } }
.sh-vote:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }

.sh-actions { display: inline-flex; gap: 2px; flex: none; }
.sh-act { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; color: var(--fg-2); cursor: pointer; text-decoration: none; transition: color var(--t-quick), background var(--t-quick); }
.sh-act .ico { width: 18px; height: 18px; }
.sh-act:hover { color: var(--fg); background: var(--gold-tint); }
.sh-act.is-report:hover { color: var(--bad); }
.sh-act:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.sh-act:disabled { opacity: 0.5; cursor: progress; }
.sh-act[aria-expanded="true"] { color: var(--fg); background: var(--gold-tint); }
.sh-more { position: relative; display: none; flex: none; }
.sh-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; display: grid; min-width: 240px; padding: 6px; background: var(--layer-solid); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -16px oklch(0 0 0 / 0.8); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transform-origin: top right; animation: sh-unfold 0.32s var(--ease-panel) both; }
@keyframes sh-unfold { from { opacity: 0; transform: translateY(-6px) scale(0.96, 0.9); } }
.sh-menu > * { animation: gm-in-up 0.3s var(--ease-panel) backwards; }
.sh-menu > :nth-child(2) { animation-delay: 30ms; } .sh-menu > :nth-child(3) { animation-delay: 60ms; } .sh-menu > :nth-child(4) { animation-delay: 90ms; } .sh-menu > :nth-child(5) { animation-delay: 120ms; }
.sh-menu a, .sh-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--fg); font: 500 14px/1 var(--f-body); text-align: left; text-decoration: none; cursor: pointer; }
.sh-menu .ico { width: 17px; height: 17px; color: var(--fg-3); }
.sh-menu a:hover, .sh-menu button:hover, .sh-menu a:focus-visible, .sh-menu button:focus-visible { outline: none; background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold); }
.sh-menu .is-report, .sh-menu .is-report .ico { color: var(--bad); }

/* --- the build ------------------------------------------------------------------------------------- */
.sh-main { position: relative; display: grid; min-height: 0; }
.sh-main:focus { outline: none; }
.sh-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; animation: sh-in 0.8s var(--ease-panel) 0.15s backwards; }
@keyframes sh-in { from { opacity: 0; transform: scale(1.012); } }

/* --- not available --------------------------------------------------------------------------------- */
.sh-missing { position: relative; display: grid; place-items: center; min-height: calc(100dvh - 52px); padding: var(--s6) var(--s4); overflow: hidden; isolation: isolate; }
.sh-missing-art { position: absolute; inset: 0; z-index: -1; }
.sh-missing-art picture { display: contents; }
.sh-missing-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0.6; animation: sh-drift 34s ease-in-out infinite alternate; }
@keyframes sh-drift { from { transform: scale(1.04); } to { transform: scale(1.12) translate(-2%, -1%); } }
.sh-missing-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, oklch(0.10 0.022 262 / 0.5), oklch(0.10 0.022 262 / 0.95)); }
.sh-missing-card { --cut: 16px; position: relative; display: grid; gap: var(--s3); max-width: 540px; padding: var(--s6); background: oklch(0.13 0.026 262 / 0.84); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); backdrop-filter: blur(14px); animation: gm-in-up var(--t-panel) var(--ease-panel) 0.2s backwards; }
.sh-missing-card::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.sh-missing-card h1 { font: 400 clamp(28px, 4vw, 38px)/1.1 var(--f-display); text-wrap: balance; }
.sh-missing-card p { color: var(--fg-2); line-height: 1.6; }
.sh-missing-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

@media (max-width: 1100px) { .sh-long { display: none; } .sh-short { display: inline; } }
@media (max-width: 860px) {
  .sh-make, .sh-actions { display: none; }
  .sh-more { display: block; }
  .sh-body.is-missing .sh-make { display: inline-flex; }
}
@media (max-width: 640px) {
  .sh-bar { flex-wrap: wrap; height: auto; padding: 8px 10px; row-gap: 8px; }
  .sh-sep { display: none; }
  .sh-brand .brand-text { display: none; }
  .sh-body.is-missing .sh-brand .brand-text { display: inline; }
  .sh-title { flex: 1 1 0; font-size: 16px; }
  .sh-spacer { display: none; }
  .sh-body.is-missing .sh-spacer { display: block; }
  .sh-ai, .sh-ai-login { order: 5; flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .sh-ai > .sh-chip:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .sh-ai .sh-short, .sh-ai-login .sh-short { overflow: hidden; text-overflow: ellipsis; }
  .sh-votes { order: 6; margin-left: auto; }
  .sh-chip { padding: 0 8px; gap: 5px; }
  .sh-vote { padding: 0 8px; }
  .sh-menu { min-width: min(260px, calc(100vw - 20px)); }
  .sh-missing { min-height: calc(100dvh - 60px); }
  .sh-missing-card { padding: var(--s5) var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .sh-bar, .sh-sweep::before, .sh-frame, .sh-missing-art img, .sh-missing-card, .sh-menu, .sh-menu > *, .sh-vote.is-pop .ico, .sh-vote.is-pop [data-count], .sh-vote.is-pop::before { animation: none; }
}
.gm-lite .sh-missing-art img { animation: none; }