/* 1995 FOOD & BEER - Story Engine ONE build 20260824-1916 */
#communityStoryRail.community-story-rail {
  display:flex !important;
  align-items:stretch !important;
  gap:10px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:4px 2px 9px !important;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}
#communityStoryRail::-webkit-scrollbar{display:none}
#communityStoryRail .community-story-item{
  display:block !important;
  flex:0 0 82px !important;
  width:82px !important;
  min-width:82px !important;
  height:132px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#fff !important;
  text-align:left !important;
  cursor:pointer;
  scroll-snap-align:start;
  -webkit-tap-highlight-color:transparent;
}
#communityStoryRail .community-story-card{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:132px !important;
  border-radius:17px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#151628 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 9px 22px rgba(0,0,0,.22) !important;
  isolation:isolate;
}
#communityStoryRail .story-engine-unread .community-story-card{
  box-shadow:0 0 0 2px rgba(255,83,20,.78),0 9px 22px rgba(0,0,0,.24) !important;
}
#communityStoryRail .story-engine-viewed .community-story-card{opacity:.82}
#communityStoryRail .community-story-media,
#communityStoryRail .story-engine-add-bg{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:linear-gradient(145deg,#27283c,#0b0c16) !important;
}
#communityStoryRail .community-story-media img{
  display:block;width:100%;height:100%;object-fit:cover;
}
#communityStoryRail .community-story-media.story-media-fallback{
  display:grid !important;place-items:center !important;
  background:radial-gradient(circle at 50% 30%,rgba(255,94,31,.28),transparent 36%),linear-gradient(160deg,#25192f,#0c0d18) !important;
}
#communityStoryRail .story-engine-text-thumb,#communityStoryRail .story-engine-play{font-size:30px;display:grid;place-items:center;width:100%;height:100%}
#communityStoryRail .community-story-overlay{
  display:block !important;position:absolute !important;inset:0 !important;
  background:linear-gradient(180deg,rgba(5,6,14,.04) 0%,rgba(5,6,14,.05) 44%,rgba(5,6,14,.90) 100%) !important;
}
#communityStoryRail .community-story-ring{
  display:block !important;position:absolute !important;top:8px !important;left:8px !important;
  width:38px !important;height:38px !important;border-radius:50% !important;padding:2px !important;
  background:linear-gradient(135deg,#ff5a1f,#ec4899,#8b5cf6) !important;
  box-shadow:0 3px 12px rgba(0,0,0,.28) !important;z-index:3 !important;
}
#communityStoryRail .community-story-ring.mine{background:linear-gradient(135deg,#10b981,#3b82f6) !important}
#communityStoryRail .community-story-face{
  display:grid !important;place-items:center !important;width:100% !important;height:100% !important;border-radius:50% !important;
  overflow:hidden !important;background:#151628 !important;border:2px solid #0b0c16 !important;font-size:15px !important;
  box-sizing:border-box !important;
}
#communityStoryRail .community-story-face img{width:100%;height:100%;object-fit:cover;display:block}
#communityStoryRail .community-story-plus{
  display:grid !important;place-items:center !important;position:absolute !important;left:35px !important;top:35px !important;
  width:18px !important;height:18px !important;border-radius:50% !important;background:#ff5a1f !important;color:#fff !important;
  border:2px solid #0b0c16 !important;font-size:12px !important;font-weight:900 !important;z-index:4 !important;
}
#communityStoryRail .story-engine-badge{
  position:absolute;top:9px;right:7px;z-index:4;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:999px;
  font-size:8px;font-weight:900;color:#fff;background:rgba(7,8,18,.60);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
}
#communityStoryRail .story-engine-video-badge{
  position:absolute;right:8px;bottom:34px;z-index:4;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(7,8,18,.72);border:1px solid rgba(255,255,255,.18);font-size:9px;color:#fff;
}
#communityStoryRail .community-story-footer{
  display:block !important;position:absolute !important;left:8px !important;right:7px !important;bottom:8px !important;z-index:3 !important;
}
#communityStoryRail .community-story-name{
  display:block !important;font-size:10px !important;line-height:1.2 !important;font-weight:900 !important;color:#fff !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
#communityStoryRail .community-story-meta{
  display:block !important;margin-top:3px !important;font-size:8.5px !important;line-height:1.2 !important;color:rgba(226,232,240,.82) !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
#communityStoryRail .story-engine-add .community-story-card{
  border:1px dashed rgba(255,255,255,.24) !important;background:#111321 !important;
}
#communityStoryRail .story-engine-add-bg{
  background:radial-gradient(circle at 30% 15%,rgba(59,130,246,.34),transparent 40%),linear-gradient(160deg,#191b2c,#0a0b14) !important;
}
.story-engine-status{align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;margin:0 1px 6px;border-radius:10px;font-size:10px;font-weight:800}
.story-engine-status.is-error{color:#fecaca;background:rgba(127,29,29,.24);border:1px solid rgba(248,113,113,.26)}
.story-engine-status button{border:0;border-radius:999px;padding:5px 8px;background:#ef4444;color:#fff;font-size:9px;font-weight:900}

/* STORY ENGINE CREATE MODAL & APP BUTTONS UPGRADE */
.btn-primary-app {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  border: none !important;
  outline: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #FF4D00, #FF7A1A) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 18px rgba(255, 77, 0, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
}
.btn-primary-app:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 24px rgba(255, 77, 0, 0.48) !important;
  transform: translateY(-1px) !important;
}
.btn-primary-app:active {
  transform: scale(0.98) !important;
}
.btn-primary-app:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.story-engine-create-modal .modal-sheet-card {
  background: #111224 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65) !important;
  border-radius: 22px !important;
  padding: 22px 20px max(20px, env(safe-area-inset-bottom)) !important;
  max-width: 460px !important;
}
.story-engine-create-modal .sheet-title-row h3 {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.2px !important;
}
.story-engine-create-modal .community-modal-hero {
  padding: 13px 15px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(255, 77, 0, 0.12)) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  margin-bottom: 14px !important;
}
.story-engine-create-modal .community-modal-hero b {
  color: #EDE9FE !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.story-engine-create-modal .community-modal-hero p {
  color: rgba(226, 232, 240, 0.75) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.story-engine-create-modal button.story-upload-btn,
.story-engine-create-modal .btn-primary-app:not(#communityStorySubmitBtn) {
  width: 100% !important;
  min-height: 52px !important;
  border: 1.5px dashed rgba(255, 77, 0, 0.45) !important;
  background: linear-gradient(135deg, rgba(255, 77, 0, 0.10), rgba(255, 122, 26, 0.04)) !important;
  border-radius: 14px !important;
  color: #FFA466 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 12px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}
.story-engine-create-modal button.story-upload-btn:hover,
.story-engine-create-modal .btn-primary-app:not(#communityStorySubmitBtn):hover {
  background: linear-gradient(135deg, rgba(255, 77, 0, 0.18), rgba(255, 122, 26, 0.10)) !important;
  border-color: #FF4D00 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(255, 77, 0, 0.28) !important;
  transform: translateY(-1px) !important;
}
.story-engine-create-modal button.story-upload-btn:active,
.story-engine-create-modal .btn-primary-app:not(#communityStorySubmitBtn):active {
  transform: scale(0.98) !important;
}
.story-engine-create-modal .form-group-chat label {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #CBD5E1 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.story-engine-create-modal .chat-input {
  width: 100% !important;
  min-height: 48px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 13px !important;
  color: #FFFFFF !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
.story-engine-create-modal .chat-input:focus {
  border-color: #FF4D00 !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.18) !important;
}
#communityStorySubmitBtn,
.story-engine-create-modal button#communityStorySubmitBtn {
  width: 100% !important;
  min-height: 50px !important;
  border: none !important;
  outline: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #FF4D00 0%, #FF7A1A 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 20px rgba(255, 77, 0, 0.42) !important;
  margin-top: 14px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}
#communityStorySubmitBtn:hover,
.story-engine-create-modal button#communityStorySubmitBtn:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 26px rgba(255, 77, 0, 0.58) !important;
  transform: translateY(-1px) !important;
}
#communityStorySubmitBtn:active,
.story-engine-create-modal button#communityStorySubmitBtn:active {
  transform: scale(0.98) !important;
}
#communityStorySubmitBtn:disabled,
.story-engine-create-modal button#communityStorySubmitBtn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.story-engine-preview-show{display:block !important;max-height:260px !important;border-radius:14px !important;overflow:hidden !important;background:#090a12 !important;border:1px solid rgba(255,255,255,.10) !important}
.story-engine-preview-show img,.story-engine-preview-show video{width:100%;max-height:220px;display:block;object-fit:contain;background:#05060e}
.story-engine-preview-meta{padding:7px 9px;font-size:10px;color:#cbd5e1;background:rgba(255,255,255,.03)}

body.story-engine-open{overflow:hidden !important}
#communityStoryViewerModal.story-engine-modal{
  display:none;padding:0 !important;background:rgba(0,0,0,.92) !important;align-items:center !important;justify-content:center !important;z-index:99999 !important;
}
#communityStoryViewerModal.story-engine-modal.show{
  display:flex !important;
}
.story-engine-viewer{
  position:relative;width:min(100vw,480px);height:min(100dvh,820px);max-height:100dvh;background:#05060e;overflow:hidden;display:flex;flex-direction:column;
  border-radius:0;box-shadow:0 24px 80px rgba(0,0,0,.55);touch-action:pan-y;
}
.story-engine-progress{position:absolute;top:max(8px,env(safe-area-inset-top));left:9px;right:9px;z-index:20;display:flex;gap:4px}
.story-engine-progress-track{height:3px;flex:1;background:rgba(255,255,255,.28);border-radius:999px;overflow:hidden}
.story-engine-progress-track i{display:block;height:100%;width:0;background:#fff;border-radius:inherit}
.story-engine-progress-track.done i{width:100% !important}
.story-engine-header{
  position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 12px);left:10px;right:10px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.story-engine-user{display:flex;align-items:center;gap:8px;min-width:0}
.story-engine-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);font-size:17px;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.story-engine-usercopy{min-width:0;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 5px rgba(0,0,0,.75)}
.story-engine-usercopy b{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.story-engine-usercopy small{font-size:10px;color:rgba(248,250,252,.82)}
.story-engine-head-actions{display:flex;gap:7px}
.story-engine-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(7,8,18,.50);color:#fff;font-size:15px;backdrop-filter:blur(9px);cursor:pointer}
.story-engine-stage{position:absolute;inset:0;overflow:hidden;background:#05060e;user-select:none;-webkit-user-select:none;touch-action:none}
.story-engine-backdrop{position:absolute;inset:-24px;background-position:center;background-size:cover;filter:blur(26px) brightness(.48);transform:scale(1.12);opacity:.68}
.story-engine-backdrop.story-engine-gradient{background:linear-gradient(145deg,#3b1b64,#ff5a1f);filter:none;transform:none;opacity:.55}
.story-engine-media{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.story-engine-media img,.story-engine-media video{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
.story-engine-text{width:100%;height:100%;display:grid;place-items:center;padding:92px 28px 180px;box-sizing:border-box;text-align:center;font-size:22px;line-height:1.5;font-weight:900;color:#fff;background:linear-gradient(145deg,rgba(92,34,171,.82),rgba(255,77,0,.78));text-shadow:0 2px 8px rgba(0,0,0,.28)}
.story-engine-bottom{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:70px 14px calc(13px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(5,6,14,0),rgba(5,6,14,.82) 42%,#05060e 100%);pointer-events:none}
.story-engine-caption{font-size:13px;line-height:1.48;color:#f8fafc;margin-bottom:10px;max-height:84px;overflow:auto;overflow-wrap:anywhere;text-shadow:0 1px 4px rgba(0,0,0,.72);pointer-events:auto}
.story-engine-reactions{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;pointer-events:auto}
.story-engine-reactions::-webkit-scrollbar{display:none}
.story-engine-react{flex:0 0 auto;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.10);color:#fff;border-radius:999px;min-width:40px;height:38px;padding:0 10px;font-size:14px;font-weight:800;backdrop-filter:blur(10px);cursor:pointer}
.story-engine-react.active{background:rgba(236,72,153,.24);border-color:rgba(244,114,182,.65)}
.story-engine-reply{display:flex;align-items:center;gap:8px;pointer-events:auto}
.story-engine-reply input{min-width:0;flex:1;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(15,16,29,.86);color:#fff;padding:0 15px;font-size:16px;outline:none;backdrop-filter:blur(10px)}
.story-engine-reply input:focus{border-color:rgba(255,90,31,.78);box-shadow:0 0 0 3px rgba(255,90,31,.12)}
.story-engine-reply button{width:44px;height:44px;border:0;border-radius:50%;background:linear-gradient(135deg,#ff5a1f,#ff7a00);color:#fff;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 7px 20px rgba(255,90,31,.28)}
.story-engine-owner-stats{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(15,16,29,.78);color:#e2e8f0;font-size:11px;font-weight:800;backdrop-filter:blur(10px)}

@media (min-width:520px){
  .story-engine-viewer{height:min(92dvh,820px);border-radius:22px}
}
@media (max-width:480px){
  #communityStoryRail .community-story-item{flex-basis:78px !important;width:78px !important;min-width:78px !important;height:126px !important}
  #communityStoryRail .community-story-card{min-height:126px !important;border-radius:16px !important}
  .story-engine-viewer{width:100vw;height:100dvh;max-height:100dvh}
  .story-engine-usercopy b{max-width:190px}
  .story-engine-bottom{padding-left:12px;padding-right:12px}
}
@media (max-width:360px){
  #communityStoryRail .community-story-item{flex-basis:74px !important;width:74px !important;min-width:74px !important;height:120px !important}
  #communityStoryRail .community-story-card{min-height:120px !important}
  .story-engine-usercopy b{max-width:155px}
  .story-engine-react{min-width:38px;padding:0 8px}
}