/* Locations: a generous square reference, two actions and a quiet conversation. */
#spotcard { top: 24px; width: 296px; max-height: calc(100% - 48px); overflow-y: auto; }
#spotshot { display: block; width: calc(100% - 36px); height: auto; aspect-ratio: 1; margin: 18px 18px 0; border: 0; border-radius: 12px; padding: 0; cursor: zoom-in; }
#spotshot img { object-fit: contain; }
#spotcard:focus { outline: none; }
#spotinfo { padding: 18px 18px 12px; gap: 8px; }
#spotsummary { font-size: 12px; -webkit-line-clamp: 2; }
#chatwikilink { display: grid; gap: 8px; padding: 0 18px 18px; border: 0; }
#chatwikistatus:empty { display: none; }
#chatprompt { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 42px; border: 1px solid #ffffff40; border-radius: 10px; padding: 10px 12px; color: #fdf9ef; background: #ffffff09; cursor: pointer; font: 800 16px/1.2 'Oldschool Grotesk Condensed', sans-serif; }
#chatprompt svg { width: 18px; height: 18px; }
#chatprompt > span:last-child { margin-left: auto; }
#chatprompt:hover { background: #ffffff18; border-color: #ffd400; }
#chatprompt:focus-visible, #spotshot:focus-visible { outline: 3px solid #ffd400; outline-offset: -3px; }
#chatroom { width: clamp(370px, 35cqw, 540px); max-height: min(58%, calc(100% - 48px)); --chat-gap: 12px; }
#chatheading { padding: 11px 14px; }
#chatheading h2 { font-size: 21px; }
#chatreply { padding: 12px; }
#chatpanelinput { min-height: 40px; }
.spot-picture-dialog { width: min(500px, calc(100vw - 40px)); padding: 0; border: 1px solid #ffffff30; border-radius: 16px; overflow: hidden; background: #202022; color: #fffaf0; }
.spot-picture-dialog::backdrop { background: #151516b3; backdrop-filter: blur(6px); }
.spot-picture-dialog img { width: 100%; display: block; }
.spot-picture-dialog button { display: block; width: 100%; padding: 14px; background: none; color: inherit; border: 0; cursor: pointer; }
body.scene-picking #feedhandle { display: none !important; }
body.scene-picking #stage { width: 100%; flex: 1; }
body.scene-picking #stage > :not(#map):not(#scene-picker) { visibility: hidden !important; pointer-events: none !important; }
#scene-picker { position: absolute; inset: 0; z-index: 40; pointer-events: none; color: #fffaf0; font-family: system-ui, sans-serif; }
#scene-picker header { position: absolute; inset: 24px 24px auto; display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; }
#scene-picker header > div { padding: 16px 20px; border: 1px solid #ffffff22; border-radius: 14px; background: #202022ed; }
.scene-picker-eyebrow { font-size: 10px; font-weight: 750; letter-spacing: .14em; color: #ffd400; }
#scene-picker h2 { margin: 6px 0; font: 800 26px/1 'Oldschool Grotesk Condensed', sans-serif; }
#scene-picker p { margin: 8px 0 0; color: #ccc6ba; font-size: 12px; }
#scene-picker button { pointer-events: auto; cursor: pointer; border: 1px solid #ffffff30; border-radius: 10px; padding: 13px 20px; background: #202022; color: inherit; font: 650 14px/1.2 system-ui, sans-serif; }
#scene-picker footer { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 24px; padding: 10px 10px 10px 20px; border-radius: 16px; background: #202022f5; white-space: nowrap; font-size: 12px; }
#scene-picker .scene-picker-use { color: #202022; background: #ffd400; border: 0; }
.scene-picker-frame { --scene-frame-ratio: 1.777777778; position: absolute; width: min(960px, calc(100% - 48px), calc((100dvh - 300px) * var(--scene-frame-ratio))); aspect-ratio: var(--scene-frame-ratio); height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #fff9; border-radius: 3px; box-shadow: 0 0 0 9999px #15151626; }
.scene-picker-frame > span { position: absolute; bottom: 10px; left: 12px; font-size: 10px; text-shadow: 0 1px 4px #000; }
.scene-picker-format { position: absolute; bottom: 10px; left: 10px; max-width: calc(100% - 20px); pointer-events: auto; padding: 8px; border: 1px solid #ffffff70; border-radius: 6px; background: #202022ed; color: #fffaf0; color-scheme: dark; font: 600 12px/1.3 system-ui, sans-serif; cursor: pointer; }
.scene-picker-format:focus-visible { outline: 2px solid #ffd400; outline-offset: 3px; }
.scene-picker-frame i { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border: 2px solid white; border-radius: 50%; background: #ffd400; box-shadow: 0 0 0 8px #ffd40026; }
@container (max-width: 900px) {
  #spotcard { top: 12px; left: 12px; right: 12px; width: auto; display: grid; grid-template-columns: min(32cqw, 152px) 1fr; max-height: 32%; }
  #spotcard[hidden] { display: none; }
  #spotshot { grid-row: 1 / 3; align-self: start; width: calc(100% - 24px); margin: 12px; }
  #spotinfo { padding: 12px 12px 8px; }
  #spottitle { font-size: 21px; }
  #spotkicker { font-size: 9px; letter-spacing: .08em; }
  #spotsummary { display: none; }
  #chatwikilink { padding: 0 12px 12px; gap: 6px; }
  #chatwiki, #chatprompt { min-height: 32px; padding: 7px 9px; font-size: 14px; }
  #chatroom { left: 12px; right: 12px; width: auto; bottom: 12px; max-height: calc(50% - 74px); --chat-gap: 9px; }
  #chatprompts > span { display: none; }
  #chatreplyfooter { justify-content: flex-end; }
  #chatheading { display: flex; padding: 9px 12px; }
}
@media (max-height: 620px) and (min-width: 901px) {
  #spotcard { width: 248px; }
  #chatroom { max-height: calc(100% - 48px); }
}
@media (max-width: 600px) {
  #scene-picker header { inset: 12px 12px auto; gap: 8px; }
  #scene-picker header > div { padding: 12px; }
  #scene-picker h2 { font-size: 22px; }
  #scene-picker p { max-width: 220px; line-height: 1.5; }
  #scene-picker footer { bottom: 12px; gap: 8px; padding: 8px; }
  #scene-picker footer > span { display: none; }
  .scene-picker-frame { width: min(calc(100% - 24px), calc((100dvh - 300px) * var(--scene-frame-ratio))); }
}
.scene-storyboard-dialog { width: min(480px, calc(100vw - 32px)); max-height: 80vh; box-sizing: border-box; padding: 24px; background: #242426; border: 1px solid #ffffff26; border-radius: 20px; color: #fffaf0; }
.scene-storyboard-dialog::backdrop { background: #141415b3; backdrop-filter: blur(5px); }
.scene-storyboard-dialog h2 { margin: 8px 0; font: 800 30px/1.1 'Oldschool Grotesk Condensed', sans-serif; }
.scene-storyboard-dialog input { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 12px; border: 1px solid #ffffff30; border-radius: 8px; background: #151516; color: inherit; font: inherit; }
.scene-storyboard-options { display: grid; gap: 8px; margin: 12px 0 20px; }
.scene-storyboard-options .wiki-btn, .wiki-location-scene { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px; text-align: left; }
.scene-storyboard-options span, .wiki-location-scene span { font-size: 12px; opacity: .7; }
.wiki-location-scenes { margin: 28px 0; padding: 20px; border: 1px solid #ffffff20; border-radius: 14px; }
.wiki-location-scenes h3 { margin-top: 0; }
.wiki-location-scenes > div { display: grid; gap: 8px; }
.wiki-location-scene small { color: #efae65; }