/* NytheraDragon — on-demand game chat. The chat remains mounted so its live connection is preserved. */
body.page-play section.chat {
  position: fixed !important;
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 800 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(350px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  height: min(640px, calc(100vh - 116px)) !important;
  min-height: 260px !important;
  max-height: calc(100vh - 116px) !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(217,166,78,.34) !important;
  border-radius: 13px !important;
  background: linear-gradient(160deg, rgba(25,12,22,.98), rgba(8,6,11,.99)) !important;
  box-shadow: 0 22px 65px rgba(0,0,0,.58), 0 0 28px rgba(143,29,44,.13) !important;
  transform: translate3d(calc(100% + 36px), 0, 0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform .24s ease, opacity .2s ease, visibility 0s linear .24s !important;
}

body.page-play.nd-chat-open section.chat {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform .24s ease, opacity .2s ease, visibility 0s !important;
}

body.page-play section.chat .section-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.page-play section.chat .content-chat {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
body.page-play section.chat .content-chat-input { flex: 0 0 auto !important; }

.nd-chat-toggle,
.nd-chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(244,213,139,.55);
  color: #fff4df;
  background: linear-gradient(135deg, #76202e, #35101b 75%);
  box-shadow: 0 8px 26px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.10);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nd-chat-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 810;
  min-width: 112px;
  min-height: 46px;
  padding: 0 17px;
  border-radius: 999px;
  font: 750 13px/1 system-ui, sans-serif;
  letter-spacing: .02em;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.nd-chat-toggle:hover,
.nd-chat-close:hover { filter: brightness(1.18); transform: translateY(-2px); }
.nd-chat-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; }
body.page-play.nd-chat-open .nd-chat-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.nd-chat-close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  font: 24px/1 system-ui, sans-serif;
}

@media (max-width: 600px) {
  body.page-play section.chat {
    right: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
    height: min(72vh, 620px) !important;
    max-height: calc(100vh - 90px) !important;
  }
  .nd-chat-toggle { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-play section.chat, .nd-chat-toggle { transition: none !important; }
}

/* Fullscreen overlay: use our page-level fullscreen control so the game AND HTML chat
   enter fullscreen together. The game object's own fullscreen mode cannot show siblings. */
body.page-play main.flash-content:fullscreen {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050407 !important;
  box-shadow: none !important;
}
body.page-play main.flash-content:fullscreen > #FFable {
  position: relative !important;
  flex: 1 1 100% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.page-play main.flash-content:fullscreen section.chat {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 2147483000 !important;
  width: min(360px, calc(100vw - 32px)) !important;
  height: min(700px, calc(100vh - 40px)) !important;
  max-height: calc(100vh - 40px) !important;
}
body.page-play main.flash-content:fullscreen .nd-chat-toggle {
  z-index: 2147483001 !important;
  right: 24px !important;
  bottom: 24px !important;
}
body.page-play main.flash-content:fullscreen .nd-fullscreen-toggle {
  z-index: 2147483001 !important;
  right: 150px !important;
  bottom: 24px !important;
}

.nd-fullscreen-toggle {
  position: fixed;
  right: 150px;
  bottom: 24px;
  z-index: 811;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(217,166,78,.48);
  border-radius: 999px;
  color: #f8e8c8;
  background: linear-gradient(135deg, rgba(38,25,19,.97), rgba(15,10,13,.98));
  box-shadow: 0 8px 26px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.08);
  font: 750 12px/1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nd-fullscreen-toggle:hover { filter: brightness(1.18); transform: translateY(-2px); }
.nd-fullscreen-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; }
body.page-play.nd-game-fullscreen .nd-fullscreen-toggle { background: linear-gradient(135deg, #76202e, #35101b 75%); }
@media (max-width: 600px) {
  .nd-fullscreen-toggle { right: 132px; bottom: 16px; min-height: 44px; padding-inline: 12px; }
  body.page-play main.flash-content:fullscreen section.chat { right: 12px !important; bottom: 12px !important; }
}


/* NytheraDragon controls refinement: compact, same-size buttons stacked at bottom-right. */
.nd-chat-toggle,
.nd-fullscreen-toggle {
  box-sizing: border-box !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 7px !important;
  gap: 6px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.nd-chat-toggle {
  right: 24px !important;
  bottom: 24px !important;
}
.nd-fullscreen-toggle {
  right: 24px !important;
  bottom: 80px !important;
}
.nd-fullscreen-toggle svg { width: 15px !important; height: 15px !important; }

/* Keep the controls stacked over the game while the complete game stage is fullscreen. */
body.page-play main.flash-content:fullscreen .nd-chat-toggle {
  right: 24px !important;
  bottom: 24px !important;
}
body.page-play main.flash-content:fullscreen .nd-fullscreen-toggle {
  right: 24px !important;
  bottom: 80px !important;
}
@media (max-width: 600px) {
  .nd-chat-toggle { right: 16px !important; bottom: 16px !important; }
  .nd-fullscreen-toggle { right: 16px !important; bottom: 72px !important; }
  body.page-play main.flash-content:fullscreen .nd-chat-toggle { right: 16px !important; bottom: 16px !important; }
  body.page-play main.flash-content:fullscreen .nd-fullscreen-toggle { right: 16px !important; bottom: 72px !important; }
}

/* When chat is open, hide both floating controls so they never cover the chat panel. */
.nd-fullscreen-toggle {
  transition: opacity .18s ease, transform .18s ease, visibility 0s !important;
}
body.page-play.nd-chat-open .nd-fullscreen-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important;
}


/* NytheraDragon: private chat gate and live player indicator. */
body.page-play section.chat .nd-chat-online {
  position: absolute;
  top: 16px;
  right: 51px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(235,220,194,.78);
  font: 600 10px/1.2 system-ui, sans-serif;
  letter-spacing: .025em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
body.page-play section.chat .nd-chat-online strong {
  color: #e6c47c;
  font-weight: 750;
}
.nd-chat-online-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #8cac79;
  box-shadow: 0 0 7px rgba(140,172,121,.45);
}
body.page-play section.chat .nd-chat-login-gate {
  display: none;
  position: absolute;
  z-index: 2;
  inset: 58px 14px 14px;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 1px solid rgba(217,166,78,.13);
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(25,12,22,.97), rgba(8,6,11,.98));
  text-align: center;
}
body.page-play section.chat:not(.nd-chat-authenticated) .content-chat,
body.page-play section.chat:not(.nd-chat-authenticated) .content-chat-input {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.page-play section.chat:not(.nd-chat-authenticated) .nd-chat-login-gate {
  display: flex !important;
}
.nd-chat-login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  max-width: 245px;
}
.nd-chat-login-mark {
  color: #d9a64e;
  font-size: 23px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(217,166,78,.35);
}
.nd-chat-login-card strong {
  color: #f0d9ad;
  font: 700 13px/1.4 Cinzel, Georgia, serif;
}
.nd-chat-login-card p {
  margin: 0;
  color: rgba(226,215,208,.65);
  font: 400 11px/1.65 system-ui, sans-serif;
}
@media (max-width: 600px) {
  body.page-play section.chat .nd-chat-online {
    top: 16px;
    right: 49px;
  }
}