/* GameTest.App — Game Engine Styles
   The in-game terminal UI.
   Loaded only on game pages.
*/

/* ── Game Player Container ────────────────────────────────────────────────── */

.gt-game-player {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  width: 100%;
  background: #12111f;
  font-family: var(--wp--preset--font-family--mono);
  color: #d7f5e3;
  overflow: hidden;
}

/* On some setups #wpadminbar renders in normal document flow rather than
   as WP core's default fixed overlay (depends on theme/plugin CSS), which
   already pushes .gt-game-player down by the bar's real height. Forcing
   an extra margin-top on top of that double-counts the offset. What we
   actually want, regardless of whether the bar is in-flow or overlaid,
   is simpler: never let the player claim more height than is actually
   left below wherever it naturally starts. JS sets this each load since
   that's the only reliable way to know the bar's real, current layout
   contribution without guessing at overlay-vs-flow per site. */
.gt-game-player {
  max-height: var(--gt-available-height, 100dvh);
}

/* ── Game Header Bar ──────────────────────────────────────────────────────── */

.gt-game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #2a2845;
  background: #0e0d1a;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
  overflow: hidden;
}

.gt-game-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gt-back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: #ff8a3d;
  text-decoration: none;
  border: 1px solid #ff8a3d;
  transition: all 0.15s;
  flex-shrink: 0;
}
.gt-back-link:hover {
  color: #0d0d14;
  border-color: #ff8a3d;
  background: #ff8a3d;
}
.gt-back-link:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 2px;
}

.gt-game-topbar-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8c97a8;
}

.gt-game-topbar-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gt-dont-panic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8a3d;
  border: 1px solid rgba(255,138,61,0.35);
  padding: 4px 10px;
  border-radius: 3px;
}

.gt-dont-panic-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff8a3d;
  animation: gt-blink 2s ease-in-out infinite;
}

@keyframes gt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.gt-game-turn-counter {
  font-size: 10px;
  color: #4a5568;
  letter-spacing: 0.06em;
}

.gt-voice-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c97a8;
  background: transparent;
  border: 1px solid rgba(140,151,168,0.35);
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.gt-voice-toggle:hover {
  color: #ff8a3d;
  border-color: rgba(255,138,61,0.45);
}
.gt-voice-toggle:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 2px;
}
.gt-voice-toggle.is-active {
  color: #ff8a3d;
  border-color: #ff8a3d;
  background: rgba(255,138,61,0.1);
}
.gt-voice-toggle.is-listening {
  animation: gt-voice-pulse 1.1s ease-in-out infinite;
}
@keyframes gt-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,61,0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(255,138,61,0.18); }
}

.gt-voice-picker {
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #8c97a8;
  background: #14141c;
  border: 1px solid rgba(140,151,168,0.35);
  border-radius: 3px;
  padding: 4px 6px;
  max-width: 130px;
  cursor: pointer;
}
.gt-voice-picker:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 1px;
}
.gt-voice-picker.is-hidden {
  display: none;
}

.gt-voice-unrecognized {
  font-size: 12px;
  color: #8c97a8;
  padding: 8px 4px 2px;
  font-style: italic;
}


/* ── Story Log ────────────────────────────────────────────────────────────── */

.gt-story-log {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 40px;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #38355a transparent;
}
.gt-story-log::-webkit-scrollbar {
  width: 8px;
}
.gt-story-log::-webkit-scrollbar-track {
  background: transparent;
}
.gt-story-log::-webkit-scrollbar-thumb {
  background: #38355a;
  border-radius: 4px;
}
.gt-story-log::-webkit-scrollbar-thumb:hover {
  background: #4a4670;
}

.gt-story-entry {
  margin-bottom: 20px;
  animation: gt-fadein 0.3s ease;
}

@keyframes gt-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Narrator text */
.gt-story-narrator {
  font-size: 15px;
  line-height: 1.75;
  color: #d7f5e3;
  white-space: pre-wrap;
}

/* Player's own input echo */
.gt-story-player-echo {
  font-size: 13px;
  color: #ff8a3d;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.gt-story-player-echo::before {
  content: '>';
  color: #ff8a3d;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Guide interstitial */
.gt-guide-entry {
  background: #e8e4d8;
  color: #2a2418;
  border-radius: 4px;
  padding: 16px 20px;
  margin: 8px 0 20px;
  position: relative;
}

.gt-guide-header {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7a5a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gt-guide-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #c8c4b0;
}

.gt-guide-text {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 14px;
  line-height: 1.65;
  color: #3a3020;
}

.gt-guide-title {
  font-size: 13px;
  font-weight: 600;
  color: #8a3d1f;
  margin-bottom: 6px;
}

/* Status/system messages */
.gt-story-system {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #4a5568;
  border-top: 1px solid #1a2030;
  padding-top: 16px;
  margin-top: 4px;
}

/* Inventory inline */
.gt-inventory-line {
  font-size: 11px;
  color: #4a7a5a;
  letter-spacing: 0.06em;
  margin-top: 6px;
}


/* ── Choices / Input ──────────────────────────────────────────────────────── */

.gt-choices-wrap {
  border-top: 2px solid #38355a;
  padding: 16px 20px;
  background: #1a1830;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  max-height: 45vh;
  max-height: 45dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #38355a transparent;
}
.gt-choices-wrap::-webkit-scrollbar {
  width: 8px;
}
.gt-choices-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.gt-choices-wrap::-webkit-scrollbar-thumb {
  background: #38355a;
  border-radius: 4px;
}
.gt-choices-wrap::-webkit-scrollbar-thumb:hover {
  background: #4a4670;
}

.gt-choices-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Parser input mode */
.gt-parser-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0e0d1a;
  border: 1px solid #6c5ce7;
  border-radius: 6px;
  padding: 10px 12px;
}

.gt-parser-prompt {
  color: #ff8a3d;
  font-size: 16px;
  flex-shrink: 0;
  user-select: none;
  font-weight: bold;
}

.gt-parser-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 15px;
  caret-color: #ff8a3d;
}

.gt-parser-input::placeholder {
  color: #4a6a5a;
}

/* Multiple choice mode */
.gt-choices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gt-choice-btn {
  background: transparent;
  border: 1px solid #1e2535;
  border-radius: 4px;
  color: #8c97a8;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.gt-choice-btn:hover {
  border-color: #ff8a3d;
  color: #d7f5e3;
  background: rgba(255,138,61,0.05);
}

.gt-choice-btn:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 2px;
}

.gt-choice-key {
  color: #ff8a3d;
  font-size: 11px;
  flex-shrink: 0;
  min-width: 16px;
}

.gt-choice-label {
  line-height: 1.4;
}


/* ── Game Over / Ending Screen ────────────────────────────────────────────── */

.gt-game-ending {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.gt-ending-inner {
  max-width: 480px;
}

.gt-ending-tag {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4a5568;
  margin-bottom: 16px;
}

.gt-ending-title {
  font-size: 22px;
  font-weight: 500;
  color: #d7f5e3;
  margin-bottom: 12px;
  font-family: var(--wp--preset--font-family--sans);
}

.gt-ending-text {
  font-size: 14px;
  line-height: 1.7;
  color: #8c97a8;
  margin-bottom: 28px;
  font-family: var(--wp--preset--font-family--sans);
}

.gt-ending-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.gt-ending-votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.gt-ending-votes-prompt {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a5568;
}

/* .gt-ending-votes-control reuses .gt-card-votes layout (flex row, centered
   gap) from global.css — no override needed there, it already centers fine
   once the parent is a flex column with align-items:center. */


/* ── Loading / Error States ───────────────────────────────────────────────── */

.gt-game-loading,
.gt-game-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #4a5568;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.gt-game-error { color: #ff5c5c; }


/* ── Home page grid script target ────────────────────────────────────────── */

#gt-games-grid {
  min-height: 200px;
}




/* ── Inline parser buttons ───────────────────────────────────────────────── */

/* "Try:" suggestion chips — clickable shortcuts derived from the node's
   actual verb map, shown above the parser input. */
.gt-suggest-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--mono);
}

.gt-suggest-label {
  color: #5a6478;
  font-size: 12px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.gt-suggest-chip {
  background: transparent;
  border: none;
  color: #ff8a3d;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: rgba(255,138,61,0.4);
  text-underline-offset: 3px;
  padding: 3px 2px;
  cursor: pointer;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.gt-suggest-chip:hover {
  color: #ffb27a;
  text-decoration-color: #ffb27a;
}

.gt-suggest-chip:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 2px;
  border-radius: 2px;
}

.gt-hint-btn {
  flex-shrink: 0;
  background: rgba(108,92,231,0.15);
  border: 1px solid #6c5ce7;
  border-radius: 4px;
  color: #a898ff;
  font-size: 11px;
  font-family: var(--wp--preset--font-family--mono);
  letter-spacing: 0.05em;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.gt-hint-btn:hover { background: rgba(108,92,231,0.3); }


.gt-cmd-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #1a1830;
  border: 1px solid #38355a;
  border-radius: 4px;
  color: #6b6890;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: var(--wp--preset--font-family--sans);
}
.gt-cmd-toggle:hover { color: #a898ff; border-color: #6c5ce7; }

.gt-cmd-list {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 24px;
  margin-top: 10px;
  background: #0e0d1a;
  border: 1px solid #38355a;
  border-radius: 6px;
  padding: 12px 16px;
  text-align: left;
}
.gt-cmd-list.is-open { display: grid; }

.gt-cmd-item {
  font-size: 11px;
  color: #7a78a0;
  font-family: var(--wp--preset--font-family--mono);
  line-height: 2;
}
.gt-cmd-item strong {
  color: #ff8a3d;
  font-weight: normal;
}

/* ── Hint System ─────────────────────────────────────────────────────────── */

.gt-hint-entry {
  background: #1a1830;
  border: 1px solid #38355a;
  border-left: 3px solid #6c5ce7;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 4px 0;
}

.gt-hint-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6c5ce7;
  display: block;
  margin-bottom: 6px;
}

.gt-hint-text {
  font-size: 13px;
  color: #b0aed0;
  line-height: 1.6;
  margin: 0 0 6px;
  font-family: var(--wp--preset--font-family--sans);
}

.gt-hint-more {
  font-size: 10px;
  color: #4a4770;
  font-style: italic;
  font-family: var(--wp--preset--font-family--sans);
}


/* ── Text Input Mode (e.g. name prompt) ──────────────────────────────────── */

.gt-textinput-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.gt-textinput-field {
  flex: 1 1 220px;
  min-width: 0;
  background: transparent;
  border: 1px solid #1e2535;
  border-radius: 4px;
  color: #d7f5e3;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
  transition: all 0.15s;
}

.gt-textinput-field:focus {
  border-color: #ff8a3d;
  background: rgba(255,138,61,0.05);
}

.gt-textinput-field::placeholder {
  color: #4a4770;
}

.gt-textinput-submit {
  background: transparent;
  border: 1px solid #ff8a3d;
  border-radius: 4px;
  color: #ff8a3d;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.15s;
}

.gt-textinput-submit:hover {
  background: #ff8a3d;
  color: #0d0d14;
}

.gt-textinput-submit:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .gt-textinput-form {
    flex-direction: column;
    align-items: stretch;
  }
  .gt-textinput-submit {
    width: 100%;
  }
}