/* ===== Cryptic Conclave — shared minigame bug reporter =====
   Paired with /js/cc-minigame-bug.js. Uses the site cyan scheme so the
   reporter looks identical in every minigame. Do not fork this file per game;
   if a game needs a different position, use data-mount on the script tag.

   CURSORS: never write a bare `cursor: pointer` in this file. It would override
   the site's skeleton-hand cursor, which is set on `button` in cryptic.css for
   standard pages and in each standalone page's own stylesheet. Always use the
   full url() stack below so the reporter matches the site on every tier. */

.cc-bug-bar {
  display: flex;
  justify-content: center;
  margin: 18px 0 4px;
}

/* Full-screen standalone pages (the visual novels) pin the trigger instead. */
.cc-bug-bar.is-floating {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9998;
  margin: 0;
  opacity: .55;
  transition: opacity .25s;
}

.cc-bug-bar.is-floating:hover,
.cc-bug-bar.is-floating:focus-within {
  opacity: 1;
}

.cc-bug-bar.is-floating .cc-bug-trigger {
  font-size: .78rem;
  padding: 6px 12px;
}

.cc-bug-trigger {
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  letter-spacing: .04em;
  color: #00cccc;
  background: rgba(10, 10, 10, .85);
  border: 1px solid #00cccc;
  border-radius: 8px;
  padding: 8px 18px;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
  transition: color .25s, box-shadow .25s, border-color .25s;
}

.cc-bug-trigger:hover,
.cc-bug-trigger:focus-visible {
  color: #00ffff;
  border-color: #00ffff;
  box-shadow: 0 0 12px rgba(0, 255, 255, .45);
  outline: none;
}

/* Overlay ---------------------------------------------------------------- */

.cc-bug-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(2px);
}

.cc-bug-overlay[hidden] {
  display: none;
}

body.cc-bug-open {
  overflow: hidden;
}

.cc-bug-panel {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px 26px 22px;
  text-align: left;
  color: #e0e0e0;
  font-family: 'Cinzel', serif;
  background: rgba(10, 10, 10, .96);
  border: 2px solid #00cccc;
  border-radius: 14px;
  box-shadow: 0 0 34px rgba(0, 255, 255, .3);
}

.cc-bug-kicker {
  margin: 0 0 4px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #00cccc;
}

.cc-bug-title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  color: #00cccc;
  text-shadow: 0 0 10px rgba(0, 204, 204, .6);
}

.cc-bug-intro {
  margin: 0 0 16px;
  font-size: .88rem;
  line-height: 1.55;
  color: #bdbdbd;
}

.cc-bug-label {
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #00cccc;
}

.cc-bug-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  resize: vertical;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.5;
  color: #e0e0e0;
  background: rgba(0, 0, 0, .6);
  border: 1px solid #00cccc;
  border-radius: 8px;
}

.cc-bug-textarea:focus-visible {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, .4);
}

.cc-bug-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: .84rem;
  color: #bdbdbd;
}

.cc-bug-status.is-error {
  color: #ff6b6b;
}

.cc-bug-status.is-ok {
  color: #6bffb0;
}

.cc-bug-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

.cc-bug-send,
.cc-bug-cancel {
  font-family: inherit;
  font-size: .88rem;
  letter-spacing: .04em;
  padding: 9px 20px;
  border-radius: 8px;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
  transition: color .25s, border-color .25s, box-shadow .25s;
}

.cc-bug-send {
  color: #0a0a0a;
  background: #00cccc;
  border: 1px solid #00cccc;
  font-weight: 700;
}

.cc-bug-send:hover:not(:disabled),
.cc-bug-send:focus-visible:not(:disabled) {
  background: #00ffff;
  border-color: #00ffff;
  box-shadow: 0 0 14px rgba(0, 255, 255, .5);
  outline: none;
}

/* Matches cryptic.css rule 3: disabled elements show not-allowed. */
.cc-bug-send:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.cc-bug-cancel {
  color: #bdbdbd;
  background: transparent;
  border: 1px solid #555;
}

.cc-bug-cancel:hover,
.cc-bug-cancel:focus-visible {
  color: #e0e0e0;
  border-color: #999;
  outline: none;
}

@media (max-width: 520px) {
  .cc-bug-panel {
    padding: 20px 18px 18px;
  }

  .cc-bug-actions {
    flex-direction: column-reverse;
  }

  .cc-bug-send,
  .cc-bug-cancel {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-bug-trigger,
  .cc-bug-send,
  .cc-bug-cancel {
    transition: none;
  }
}