/* Course Captain — styles. The kit (../kit/game-kit.css) gives the paper, the type, the bar, the
   cover and the buttons. Here: the sky (a pale disc for the purpose, rain when a gauge runs low), the
   ship and its route, the four gauges, the card and its two answers, the week line at the foot, and
   the captain’s log with the decisions that came back.
   The gauges are ink; colour belongs to the elements of the model that each card comes from. */

/* ---------- the sky ---------- */

.cc-sky { position: absolute; inset: 0; pointer-events: none; }
.cc-sun {
  position: absolute;
  width: 230px; height: 230px;
  margin: -115px 0 0 -115px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.07;
  transition: opacity 1.2s, left 2s var(--ease-out), top 2s var(--ease-out);
}
.cc-rain {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(35, 38, 31, 0.07) 22px 23px);
  background-size: 200px 200px;
  animation: cc-rain 0.9s linear infinite;
  transition: opacity 1.5s;
}
@keyframes cc-rain { to { background-position: -60px 200px; } }

/* ---------- the ship and the weeks along the waterline ---------- */

.cc-ship { position: absolute; left: 0; top: 0; width: 96px; height: 88px; z-index: 6; pointer-events: none; will-change: transform; }
.cc-ship path { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cc-ship-mast { fill: none; }
.cc-ship-sail, .cc-ship-jib { fill: var(--card); }
.cc-ship-hull { fill: var(--ink); }
.cc-ship-flag { fill: var(--ink); stroke-width: 1.4; transition: fill 0.4s; }

.cc-route { position: absolute; inset: 0; z-index: 5; pointer-events: none; transition: opacity 0.8s; }
/* on the cover only the ship waits at the start; the weeks and the sky come with the voyage */
body:not(.g-playing) .cc-route, body:not(.g-playing) .cc-sky { opacity: 0; }
.cc-sky { transition: opacity 0.8s; }
.cc-buoy {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: background 0.4s;
}
.cc-buoy.is-past { background: var(--ink); }
.cc-buoy span {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- the bar: four gauges ---------- */

.cc-hud { opacity: 0; transition: opacity 0.5s; height: 76px; }
body.g-playing .cc-hud { opacity: 1; }
.cc-gauges { display: flex; gap: 22px; align-items: flex-start; }
.cc-gauge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 66px; }
.cc-gauge svg { width: 38px; height: 38px; overflow: visible; }
.cc-gauge .outline { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.cc-gauge .level { fill: var(--ink); }
.cc-clip { transition: transform 0.9s var(--ease-out); }
.cc-gauge-name { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-soft); }
.cc-gauge.is-low .outline { stroke: var(--danger); }
.cc-gauge.is-low .level { fill: var(--danger); }
.cc-gauge.is-low svg { animation: cc-low 1.4s ease-in-out infinite; }
@keyframes cc-low { 50% { transform: scale(1.1); } }
.cc-gauge.is-up svg { animation: cc-up 0.6s var(--ease-back); }
.cc-gauge.is-down svg { animation: cc-down 0.5s ease; }
@keyframes cc-up { 40% { transform: scale(1.22) translateY(-3px); } }
@keyframes cc-down { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
.cc-dot {
  position: absolute;
  top: -9px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s, transform 0.25s var(--ease-back);
}
.cc-dot.is-on { opacity: 1; transform: scale(var(--s, 1)); }
.cc-week { white-space: nowrap; }
.cc-week b { color: var(--ink); font-weight: 600; font-size: 14px; }

/* ---------- what happened ---------- */

.cc-after {
  position: absolute;
  left: 50%;
  top: 86px;
  z-index: 8;
  width: min(640px, calc(100% - 32px));
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
}
.cc-after.is-on { opacity: 1; }
/* a habit's answer: first time, or practised */
.cc-after-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink);
}
/* the first time a gauge turns red: what red means, in the gauge's red */
.cc-after-tag.is-warn { color: var(--danger); }

/* the week: what the course gave back, at the foot of the screen, under the waterline */
.cc-weekline {
  position: absolute;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 12px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 7px 18px 8px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: rgba(252, 250, 244, 0.9);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
body.g-playing .cc-weekline.is-on { opacity: 1; }
.cc-weekline.is-new { animation: cc-wl 0.7s var(--ease-back); }
@keyframes cc-wl { from { transform: translate(-50%, 14px); opacity: 0; } }
.cc-weekline b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cc-weekline i { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--ink-soft); }
.cc-wl-e { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.cc-wl-e svg { width: 13px; height: 13px; fill: currentColor; align-self: center; }
.cc-wl-e.is-down { color: var(--danger); }

/* ---------- the card ---------- */

.cc-deck { position: absolute; left: 50%; z-index: 10; width: min(420px, calc(100% - 32px)); transform: translateX(-50%); }
.cc-card {
  position: relative;
  padding: 22px 26px 26px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 18px 40px rgba(35, 38, 31, 0.16), 0 2px 0 rgba(35, 38, 31, 0.05);
  text-align: center;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
.cc-card.is-dragging { cursor: grabbing; }
.cc-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 4px; border-radius: 0 0 3px 3px; background: var(--tone); }
.cc-card[data-tone="ink"] { --tone: var(--ink); }
.cc-card[data-tone="ilo"] { --tone: var(--c-ilo); }
.cc-card[data-tone="tla"] { --tone: var(--c-tla); }
.cc-card[data-tone="assess"] { --tone: var(--c-assess); }
.cc-card[data-tone="grey"] { --tone: var(--muted); }
.cc-card-el {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cc-card-el::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); }
.cc-face { display: block; width: 84px; height: 84px; margin: 0 auto 8px; }
.cc-face .frame { fill: var(--inset); stroke: var(--ink); stroke-width: 1.4; }
.cc-face .skin { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.cc-face .hair { fill: var(--ink); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.cc-face .line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-face .dot { fill: var(--ink); }
.cc-who { margin: 0; font-family: var(--font-ui); font-size: 15px; font-weight: 650; color: var(--ink); }
.cc-role { margin: 1px 0 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cc-text { margin: 16px 0 0 0; font-family: var(--font-display); font-size: 25px; line-height: 1.25; color: var(--ink); text-wrap: balance; }
/* an echo: the decision this card comes back from */
.cc-echo {
  display: inline-block;
  max-width: 100%;
  margin: 12px 0 -4px 0;
  padding: 3px 11px 4px;
  border: 1px dashed var(--ink-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* the answer the card leans towards, written across its top corner */
.cc-lean {
  position: absolute;
  top: 16px;
  max-width: 62%;
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.cc-lean.is-left { left: 14px; text-align: left; transform: rotate(-4deg); }
.cc-lean.is-right { right: 14px; text-align: right; transform: rotate(4deg); }

/* ---------- the two answers ---------- */

.cc-choices {
  position: absolute;
  left: 50%;
  z-index: 9;
  width: min(760px, calc(100% - 32px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  transform: translateX(-50%);
  transition: opacity 0.3s;
}
.cc-choices.is-off { opacity: 0; pointer-events: none; }
.cc-choice {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.18s var(--ease-out);
}
.cc-choice.is-left { text-align: left; }
.cc-choice.is-right { text-align: right; justify-content: flex-end; }
.cc-choice:hover, .cc-choice.is-hot { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.cc-choice:focus-visible { outline: 2px solid var(--c-ilo); outline-offset: 3px; }
.cc-choice-key { flex: none; font-family: var(--font-mono); font-size: 15px; opacity: 0.6; }

/* ---------- the cover ---------- */

.cc-cover .seaeu-statement { background: var(--paper); }
.cc-cover-body { justify-content: flex-start; padding-top: 44px; }
.cc-cover .g-title { font-size: clamp(64px, 10vw, 150px); }
.cc-cover .g-steps { margin-top: 64px; }
/* new to student-active teaching, or done it before */
.cc-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 26px; }
.cc-start-label { margin-right: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cc-start .g-toggle { height: 34px; padding: 0 14px; font-size: 12px; }
.cc-start-hint { flex: 1 1 100%; font-size: 15px; color: var(--muted); }
.cc-cover .g-steps li { padding: 12px 16px 14px; border: 1px solid var(--hair-strong); border-radius: 10px; background: var(--card); animation: cc-bob 3.6s ease-in-out infinite; }
.cc-cover .g-steps li:nth-child(2) { animation-delay: -1.2s; }
.cc-cover .g-steps li:nth-child(3) { animation-delay: -2.4s; }
@keyframes cc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- the end ---------- */

.cc-end { background: rgba(245, 242, 234, 0.92); }
.cc-end-body { justify-content: flex-start; padding-top: 60px; }
.cc-end-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(52px, 8vw, 112px); line-height: 0.95; letter-spacing: -0.02em; }
.cc-end-title em { font-style: italic; }
.cc-end-text { margin: 20px 0 0 0; max-width: 34em; font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.4; color: var(--ink-soft); }
.cc-end-link { margin: 14px 0 0 0; }
.cc-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 170px)); gap: 18px; margin: 34px 0 0 0; padding: 0; list-style: none; }
.cc-bars li { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cc-bar { height: 6px; margin-top: 7px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.cc-bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transform-origin: left; animation: cc-grow 1.2s var(--ease-out) both; }
.cc-bars li.is-low .cc-bar i { background: var(--danger); }
@keyframes cc-grow { from { transform: scaleX(0); } }
.cc-log-head { margin: 52px 0 4px 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cc-log-hint { margin: 0 0 16px 0; font-size: 15px; color: var(--muted); }
.cc-log { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-strong); }
.cc-log li { display: grid; grid-template-columns: 58px 190px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.cc-log-week { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); }
.cc-log-el { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); border-bottom: 1px solid var(--hair-strong); justify-self: start; }
.cc-log-el:hover { color: var(--ink); border-bottom-color: var(--ink); }
.cc-log-el::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--tone); }
.cc-log-el[data-tone="ink"] { --tone: var(--ink); }
.cc-log-el[data-tone="ilo"] { --tone: var(--c-ilo); }
.cc-log-el[data-tone="tla"] { --tone: var(--c-tla); }
.cc-log-el[data-tone="assess"] { --tone: var(--c-assess); }
.cc-log-el[data-tone="grey"] { --tone: var(--muted); }
.cc-log-what { font-size: 15.5px; line-height: 1.45; color: var(--ink-soft); }
.cc-log-what b { color: var(--ink); font-weight: 600; }
.cc-log-what i { font-family: var(--font-display); font-size: 16.5px; color: var(--muted); }
/* decisions that came back: the echo marks where it came from, the first decision where it went */
.cc-log li.is-echo { background: linear-gradient(90deg, var(--inset), transparent 70%); }
.cc-log-chain {
  display: inline-block;
  padding: 0 8px 1px;
  border: 1px dashed var(--ink-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* what a decision moved, and each week's line, in the log */
.cc-log-fx { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; }
.cc-log-fx i { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); }
.cc-log-fx i.is-down { color: var(--danger); }
.cc-log li.cc-log-wk { padding: 7px 0; border-bottom: 1px dashed var(--hair); }
.cc-log-wk-e { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.cc-log-wk-e svg { width: 12px; height: 12px; fill: currentColor; }
.cc-log-wk-e.is-down { color: var(--danger); }
.cc-log-wk i { font-family: var(--font-display); font-size: 15.5px; color: var(--muted); }
.cc-next { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-strong); }
.cc-next li { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; color: var(--ink-soft); }
/* a dilemma: two good answers */
.cc-card-dilemma { margin-left: 10px; padding: 2px 8px; border: 1px dashed var(--ink-soft); border-radius: 999px; letter-spacing: 0.08em; color: var(--ink); }
.cc-habits { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 22px 0 0 0; font-size: 15px; color: var(--ink-soft); }
.cc-habits b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cc-end-actions { margin-top: 30px; }

/* ---------- smaller screens ---------- */

@media (max-height: 760px) and (min-width: 721px) {
  .cc-text { font-size: 22px; margin-top: 10px; }
  .cc-face { width: 66px; height: 66px; }
  .cc-card { padding: 18px 22px 20px; }
}

@media (max-width: 720px) {
  .cc-hud { height: 64px; grid-template-columns: auto 1fr auto; }
  .cc-gauges { gap: 6px; justify-content: center; }
  .cc-gauge { width: 52px; }
  .cc-gauge svg { width: 30px; height: 30px; }
  .cc-gauge-name { font-size: 9px; letter-spacing: 0.04em; }
  .cc-week span { display: none; }
  .cc-after { top: 70px; font-size: 16.5px; }
  .cc-text { font-size: 20px; margin-top: 10px; }
  .cc-face { width: 60px; height: 60px; }
  .cc-card { padding: 16px 18px 20px; }
  .cc-choices { grid-template-columns: 1fr; gap: 8px; }
  .cc-choice { min-height: 46px; font-size: 15px; }
  .cc-sun { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .cc-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-log li { grid-template-columns: 44px minmax(0, 1fr); }
  .cc-log-what { grid-column: 1 / -1; }
  .cc-log li.cc-log-wk { grid-template-columns: 44px auto; }
  .cc-log-wk i { grid-column: 1 / -1; }
  .cc-card-el { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .cc-card-dilemma { margin-left: 0; }
  .cc-buoy span { display: none; }
  .cc-start { gap: 8px; margin-top: 20px; }
  .cc-start-label { flex: 1 1 100%; margin: 0; font-size: 11px; }
  .cc-start .g-toggle { flex: 1 1 0; padding: 0 8px; font-size: 11px; }
  .cc-start-hint { display: none; }   /* the two answers say enough on a phone, and the sea needs the room */
  body:not(.g-playing) .cc-ship { visibility: hidden; }   /* on a phone's cover it would sit under Set sail */
  .cc-weekline { padding: 6px 14px 7px; border-radius: 16px; }
  .cc-weekline i { font-size: 15px; }
  .cc-echo { margin-top: 8px; font-size: 10.5px; }
  .cc-after-tag { font-size: 10px; letter-spacing: 0.05em; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cc-rain, .cc-gauge.is-low svg, .cc-gauge.is-up svg, .cc-gauge.is-down svg, .cc-weekline.is-new, .cc-cover .g-steps li, .cc-bar i { animation: none; }
}