/* ============================================================
   Captain Reef Junior — child classroom layer styles
   Bubble Bay palette, deliberately quiet. Nothing here restyles
   an existing game element; every selector is crjc-* scoped so
   removing this file cannot alter the game's appearance.
   ============================================================ */

.crjc-overlay{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; padding:4vmin;
  background:rgba(4,26,48,.62); backdrop-filter:blur(3px);
}
.crjc-overlay.show{ display:flex; }

.crjc-card{
  width:min(560px, 94vw); max-height:88vh; overflow:auto;
  background:linear-gradient(180deg,#fffdf7 0%,#f3f8fb 100%);
  border-radius:26px; padding:clamp(18px,3vmin,30px);
  box-shadow:0 24px 60px rgba(3,20,38,.42), inset 0 0 0 3px rgba(255,255,255,.7);
  font-family:var(--font-body, "Nunito", system-ui, sans-serif);
  color:#0d3357;
}
.crjc-card.small{ width:min(420px,92vw); text-align:center; }

.crjc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.crjc-title{
  font-family:var(--font-title, "Fredoka", system-ui, sans-serif);
  font-weight:700; font-size:clamp(20px,2.6vmin,28px); margin:0 0 4px; color:#0a3d62;
}
.crjc-x{
  border:0; background:rgba(10,61,98,.08); color:#0a3d62; cursor:pointer;
  width:38px; height:38px; border-radius:50%; font-size:17px; line-height:1; flex:0 0 auto;
}
.crjc-x:hover{ background:rgba(10,61,98,.16); }
.crjc-x:focus-visible, .crjc-btn:focus-visible, .crjc-input:focus-visible{
  outline:3px solid #f4b942; outline-offset:2px;
}

.crjc-body{ margin-top:10px; }
.crjc-lead{ font-size:clamp(15px,1.9vmin,18px); line-height:1.45; margin:.2em 0 .8em; }
.crjc-note{ font-size:14px; line-height:1.45; color:#4a6a86; margin-top:14px; }
.crjc-alias{
  font-family:var(--font-title, "Fredoka", system-ui, sans-serif);
  font-size:clamp(22px,3vmin,30px); font-weight:700; color:#0d7ea8; margin:.2em 0 .6em;
}
.crjc-mascot{ width:120px; height:auto; margin:0 auto .4em; display:block; }

.crjc-form{ display:grid; gap:14px; margin:10px 0 6px; }
.crjc-field{ display:block; }
.crjc-label{
  display:block; font-weight:700; font-size:14px; color:#28556f; margin-bottom:5px;
  letter-spacing:.02em;
}
.crjc-input{
  width:100%; box-sizing:border-box; font:inherit; font-size:clamp(20px,2.6vmin,26px);
  font-family:var(--font-title, "Fredoka", system-ui, sans-serif);
  letter-spacing:.22em; text-transform:uppercase; text-align:center;
  padding:.5em .4em; border-radius:14px; border:2px solid #bcd8e6; background:#fff; color:#0a3d62;
}
.crjc-input::placeholder{ color:#b9cdd9; letter-spacing:.22em; }

.crjc-btn{
  display:block; width:100%; margin-top:12px; cursor:pointer;
  font-family:var(--font-title, "Fredoka", system-ui, sans-serif);
  font-weight:700; font-size:clamp(16px,2.1vmin,19px);
  padding:.72em 1.2em; border-radius:999px; border:0; transition:transform .12s ease, filter .12s ease;
}
.crjc-btn.primary{ background:linear-gradient(180deg,#f7c65a,#e8a72c); color:#08233f;
  box-shadow:0 6px 0 #c88c1c, 0 10px 22px rgba(6,40,70,.28); }
.crjc-btn.ghost{ background:rgba(10,61,98,.07); color:#0a3d62; }
.crjc-btn:hover{ filter:brightness(1.04); }
.crjc-btn:active{ transform:translateY(2px); }
.crjc-btn[disabled]{ opacity:.6; cursor:default; transform:none; }

.crjc-msg{ min-height:1.3em; margin:.5em 0 0; font-size:15px; color:#28556f; }
.crjc-msg.bad{ color:#b8452a; font-weight:700; }

.crjc-mission{
  border:2px solid #d7e8f0; border-radius:18px; padding:14px 16px; margin-bottom:12px;
  background:#fff;
}
.crjc-mission-name{
  font-family:var(--font-title, "Fredoka", system-ui, sans-serif);
  font-weight:700; font-size:18px; color:#0a3d62;
}
.crjc-mission-sub{ font-size:15px; color:#2f6c8c; margin-top:2px; }
.crjc-mission-note{ font-size:14px; color:#4a6a86; margin-top:6px; font-style:italic; }

/* the gentle "a mission from your teacher" nudge on the map */
.crjc-mission-nudge{
  position:fixed; left:50%; bottom:2.2vmin; transform:translateX(-50%);
  z-index:800; display:flex; align-items:center; gap:10px; cursor:pointer;
  border:0; border-radius:999px; padding:.5em 1.2em .5em .5em;
  background:linear-gradient(180deg,#fffdf6,#ffeec4);
  box-shadow:0 8px 24px rgba(4,30,55,.35), inset 0 0 0 2px rgba(255,255,255,.8);
  font-family:var(--font-title, "Fredoka", system-ui, sans-serif); color:#0a3d62;
  animation:crjcBob 3.2s ease-in-out infinite;
}
.crjc-mission-mascot{ width:44px; height:44px; object-fit:contain; }
.crjc-mission-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.crjc-mission-title{ font-weight:700; font-size:15px; }
.crjc-mission-sub{ font-size:13px; color:#3a6f8f; }
@keyframes crjcBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-5px); } }

/* the tiny cloud. Children get a glyph, never a network message. */
.crjc-indicator{
  position:fixed; right:1.4vmin; bottom:1.4vmin; z-index:700;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.82); color:#2f6c8c; font-size:14px;
  box-shadow:0 3px 10px rgba(4,30,55,.22); pointer-events:none;
}
.crjc-indicator.s-synced{ color:#2c7a3e; }
.crjc-indicator.s-syncing{ color:#0d7ea8; }
.crjc-indicator.s-needs-reconnect{ color:#b8452a; }
.crjc-indicator.s-offline, .crjc-indicator.s-pending{ color:#8aa4b4; }

/* Parent Cove panel */
.crjc-parent-rows{ display:grid; gap:6px; margin-top:6px; }
.crjc-parent-row{ display:flex; justify-content:space-between; gap:14px; font-size:14px; }
.crjc-parent-row .k{ color:#4a6a86; }
.crjc-parent-row .v{ font-weight:700; color:#0a3d62; text-align:right; }

@media (prefers-reduced-motion: reduce){
  .crjc-mission-nudge{ animation:none; }
  .crjc-btn{ transition:none; }
}
@media (prefers-contrast: more){
  .crjc-card{ background:#fff; }
  .crjc-input{ border-color:#0a3d62; }
}