/* Clean, middle-school friendly layout */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0b1016;color:#e7e3db;font-family:"Crimson Pro",serif}
body{overflow:hidden}

.bg,.sparkles,.vignette{position:fixed;inset:0;pointer-events:none!important;z-index:0}

.screen{position:relative;z-index:10;display:none;height:100%;padding:18px;overflow-y:auto;opacity:0;transition:opacity .2s ease}
.screen.show{display:block;opacity:1}

.panel{
  max-width:820px;
  margin:0 auto;
  padding:20px;
  background:#1a1f26;
  border:2px solid #3b414a;
  border-radius:14px;
}

.panel::before{
  content:"";
  display:block;
  height:6px;
  width:100%;
  margin-bottom:14px;
  border-radius:3px;
  background:linear-gradient(90deg,#5a4a2a,#b08a3c,#5a4a2a);
}

h1,h2,h3{color:#e2b85c;margin-bottom:10px}
p{line-height:1.6;margin-bottom:12px}
.muted{opacity:.78;font-style:italic}
.list{margin-left:20px;margin-bottom:12px}
.list li{margin-bottom:6px}

/* Buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.btn{
  padding:10px 16px;border-radius:10px;border:1px solid #4a515b;
  background:#121820;color:#e7e3db;cursor:pointer;font-size:1rem
}
.btn-primary{
  background:linear-gradient(135deg,#c7a24a,#9f7f32);
  color:#1a1f26;font-weight:700;border:none
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:hover:not(:disabled){transform:translateY(-1px)}

/* Output */
.output-panel{
  margin-top:14px;
  padding:14px;
  background:#121820;
  border:1px dashed #4a515b;
  border-radius:12px;
}
.code-window{
  background:#0b1016;
  border:1px solid #3b414a;
  border-left:6px solid #6b5a2e;
  border-radius:10px;
  padding:12px;
  overflow:auto;
  min-height:120px;
}
code{white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92rem}

/* Ghost typing */
.ghost-editor{
  margin-top:12px;
  position:relative;
  background:#0b1016;
  border:1px solid #3b414a;
  border-radius:10px;
  overflow:hidden;
}
.ghost-layer{
  position:absolute;inset:0;margin:0;padding:12px;
  color:rgba(231,227,219,.25);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.95rem;line-height:1.5;white-space:pre;overflow:auto;pointer-events:none;
}
.ghost-input{
  position:relative;width:100%;
  background:transparent;color:#e7e3db;
  border:none;outline:none;padding:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.95rem;line-height:1.5;white-space:pre;overflow:auto;resize:vertical;
  min-height:220px;
}

.good{color:#98ff88;font-weight:700}
.bad{color:#ff6b6b;font-weight:700}

.details{margin-top:14px}
.details textarea{
  width:100%;
  margin-top:10px;
  background:#0b1016;
  color:#e7e3db;
  border:1px solid #3b414a;
  border-radius:10px;
  padding:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* Mobile */
@media(max-width:700px){
  .panel{padding:16px}
  .btn{width:100%}
}
/* =====================================================
   Quick Reference Scroll (First Mate)
===================================================== */
#qrs-mount{ position:fixed; right:14px; bottom:14px; z-index:50; width:320px; max-width:90vw; }

.qrs{ background:#121820; border:2px solid #3b414a; border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.35); overflow:hidden; }
.qrs-toggle{ width:100%; text-align:left; padding:10px 12px; background:linear-gradient(135deg,#2b3444,#121820); color:#e7e3db; border:none; cursor:pointer; font-weight:700; }
.qrs-body{ padding:12px; display:block; }

.qrs.closed .qrs-body{ display:none; }

.qrs-header{ margin-bottom:10px; }
.qrs-title{ color:#e2b85c; font-size:1.05rem; margin-bottom:4px; }
.qrs-sub{ opacity:.85; font-size:.95rem; }

.qrs-card{ background:#0b1016; border:1px solid #3b414a; border-radius:12px; padding:10px; margin-top:10px; }
.qrs-label{ opacity:.75; font-size:.85rem; margin-bottom:6px; }
.qrs-mate{ font-style:italic; }
.qrs-tip{ line-height:1.45; }

.qrs-vars{ margin-left:18px; }
.qrs-vars li{ margin-bottom:6px; }
.qrs-vars code{ color:#c7d4ff; }

.qrs-mini{ font-size:.95rem; }
.qrs-error code{ color:#ffb3b3; }
.qrs-ok{ color:#98ff88; font-weight:700; }

/* mood accents */
.qrs-mood-calm{ border-color:#3b414a; }
.qrs-mood-proud{ border-color:#6b5a2e; }
.qrs-mood-caution{ border-color:#c7a24a; }
.qrs-mood-storm{ border-color:#ff6b6b; }

@media(max-width:700px){
  #qrs-mount{ right:10px; left:10px; width:auto; }
}
/* =====================================================
   First Mate Dialog — Buttons (Minimal)
===================================================== */

#mate-dialog .btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #4a515b;
  background: #121820;
  color: #e7e3db;
  cursor: pointer;
  font-size: 1rem;
}

#mate-dialog .btn-primary {
  background: linear-gradient(135deg, #c7a24a, #9f7f32);
  color: #1a1f26;
  font-weight: 700;
  border: none;
}

#mate-dialog .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

#mate-dialog .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* =====================================================
   Voyage Complete Reveal Animation
===================================================== */

#voyage-complete-banner{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  z-index:9998;
}

#voyage-complete-banner .vc-inner{
  width:min(560px, 92vw);
  background:#1a1f26;
  border:2px solid #6b5a2e;
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  text-align:center;
  transform:scale(.96);
}

#voyage-complete-banner .vc-title{
  color:#e2b85c;
  font-weight:800;
  letter-spacing:.06em;
  font-size:1.2rem;
  margin-bottom:8px;
}

#voyage-complete-banner .vc-sub{
  color:#e7e3db;
  opacity:.86;
  font-style:italic;
}

/* Play animation when body toggles class */
body.voyage-complete #voyage-complete-banner{
  animation: vc-fade 1.9s ease-in-out forwards;
}

body.voyage-complete #voyage-complete-banner .vc-inner{
  animation: vc-pop 1.9s ease-in-out forwards;
}

/* Subtle “success glow” on the code window */
body.voyage-complete .code-window{
  animation: vc-glow 1.2s ease-out forwards;
}

@keyframes vc-fade{
  0%{ opacity:0; }
  10%{ opacity:1; }
  75%{ opacity:1; }
  100%{ opacity:0; }
}

@keyframes vc-pop{
  0%{ transform:scale(.96) translateY(6px); }
  12%{ transform:scale(1.02) translateY(0); }
  75%{ transform:scale(1.02) translateY(0); }
  100%{ transform:scale(.98) translateY(0); }
}

@keyframes vc-glow{
  0%{ box-shadow: none; border-left-color:#6b5a2e; }
  35%{ box-shadow:0 0 0 2px rgba(214,178,92,.25), 0 0 28px rgba(214,178,92,.22); border-left-color:#d6b25c; }
  100%{ box-shadow:none; border-left-color:#6b5a2e; }
}
/* =====================================================
   First Mate Dialog — Minimal Card Styling
===================================================== */
#mate-dialog .mate-card{
  width:min(560px, 92vw);
  background:#1a1f26;
  border:2px solid #6b5a2e;
  border-radius:14px;
  padding:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
}

#mate-dialog .mate-title{ color:#e2b85c; margin-bottom:10px; }
#mate-dialog .mate-line{ color:#e7e3db; line-height:1.6; margin-bottom:10px; }
#mate-dialog .mate-sub{ opacity:.82; font-style:italic; margin-bottom:14px; }

#mate-dialog .mate-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
/* First Mate Dialog buttons (minimal) */
#mate-dialog .btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #4a515b;
  background: #121820;
  color: #e7e3db;
  cursor: pointer;
  font-size: 1rem;
}
#mate-dialog .btn-primary {
  background: linear-gradient(135deg, #c7a24a, #9f7f32);
  color: #1a1f26;
  font-weight: 700;
  border: none;
}
#mate-dialog .btn:hover:not(:disabled) { transform: translateY(-1px); }
#mate-dialog .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* First Mate Dialog card */
#mate-dialog .mate-card{
  width:min(560px, 92vw);
  background:#1a1f26;
  border:2px solid #6b5a2e;
  border-radius:14px;
  padding:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
}
#mate-dialog .mate-title{ color:#e2b85c; margin-bottom:10px; }
#mate-dialog .mate-line{ color:#e7e3db; line-height:1.6; margin-bottom:10px; }
#mate-dialog .mate-sub{ opacity:.82; font-style:italic; margin-bottom:14px; }
#mate-dialog .mate-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Voyage Complete Reveal Animation */
#voyage-complete-banner{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  z-index:9998;
}
#voyage-complete-banner .vc-inner{
  width:min(560px, 92vw);
  background:#1a1f26;
  border:2px solid #6b5a2e;
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  text-align:center;
  transform:scale(.96);
}
#voyage-complete-banner .vc-title{
  color:#e2b85c;
  font-weight:800;
  letter-spacing:.06em;
  font-size:1.2rem;
  margin-bottom:8px;
}
#voyage-complete-banner .vc-sub{
  color:#e7e3db;
  opacity:.86;
  font-style:italic;
}
body.voyage-complete #voyage-complete-banner{
  animation: vc-fade 1.9s ease-in-out forwards;
}
body.voyage-complete #voyage-complete-banner .vc-inner{
  animation: vc-pop 1.9s ease-in-out forwards;
}
body.voyage-complete .code-window{
  animation: vc-glow 1.2s ease-out forwards;
}
@keyframes vc-fade{
  0%{ opacity:0; }
  10%{ opacity:1; }
  75%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes vc-pop{
  0%{ transform:scale(.96) translateY(6px); }
  12%{ transform:scale(1.02) translateY(0); }
  75%{ transform:scale(1.02) translateY(0); }
  100%{ transform:scale(.98) translateY(0); }
}
@keyframes vc-glow{
  0%{ box-shadow: none; border-left-color:#6b5a2e; }
  35%{ box-shadow:0 0 0 2px rgba(214,178,92,.25), 0 0 28px rgba(214,178,92,.22); border-left-color:#d6b25c; }
  100%{ box-shadow:none; border-left-color:#6b5a2e; }
}