@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --green: #00a35f;
  --green-dark: #008a50;
  --green-bright: #1fcc6f;
  --mint: #a6dcc3;
  --mint-2: #76cda6;
  --mint-3: #48bf8b;
  --ink: #16241d;
  --muted: #587064;
  --card: #ffffff;
  --warn: #f29f05;
  --red: #e2483d;
  --mark: #fff27a;
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  background: var(--mint);
  background-image:
    radial-gradient(circle at calc(-10% + var(--mx, 0px)) calc(-10% + var(--my, 0px)), var(--mint-3) 0 28%, transparent 28.2%),
    radial-gradient(circle at calc(110% - var(--mx, 0px)) calc(85% - var(--my, 0px)), var(--mint-2) 0 22%, transparent 22.2%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.45;
}
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 .6em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }

/* ---------- brand ---------- */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: .5px;
}
.logo .banner {
  background: #111; color: #fff; padding: 4px 16px; font-size: 18px;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}
.logo .sub { font-weight: 600; color: var(--green-dark); font-size: 15px; }
.logo { text-decoration: none; }
.logo img { height: 56px; width: auto; display: block; }

/* ---------- layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--green-bright);
}
.topbar .spacer { flex: 1; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; }
.grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 4px solid var(--green-bright); border-radius: var(--radius);
  padding: 20px 22px;
}
.card.green { background: var(--green); color: #fff; border-color: var(--green-bright); }
.card.green .muted { color: #d9f5e7; }
.stack > * + * { margin-top: 14px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 12px 20px; cursor: pointer;
  background: var(--green); color: #fff; font-weight: 600; font-size: 16px;
  transition: transform .06s, background .15s;
}
.btn:hover { background: var(--green-dark); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.big { font-size: 20px; padding: 16px 28px; border-radius: 18px; }
.btn.ghost { background: #fff; color: var(--green-dark); border: 2px solid var(--green-bright); }
.btn.ghost:hover { background: #effaf4; }
.btn.warn { background: var(--warn); }
.btn.red { background: var(--red); }
.btn.icon { padding: 10px 12px; }
.switch {
  width: 44px; height: 26px; border-radius: 999px; background: #d7ded9; border: 0; padding: 3px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: flex-start;
  transition: background .15s; flex-shrink: 0;
}
.switch.on { background: var(--green); justify-content: flex-end; }
.switch-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.challenge-header { flex-wrap: nowrap; align-items: flex-start; }
.challenge-header-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
@media (max-width: 480px) { .challenge-header-icon { font-size: 30px; } }
.start-bar {
  position: sticky; bottom: 0; background: var(--card);
  padding: 10px 0 4px; margin-top: 14px !important; z-index: 2; flex-wrap: nowrap;
}
.start-bar .btn { flex: 1; }

label.field { display: block; }
label.field > span { display: block; font-weight: 500; margin-bottom: 4px; }
label.field > small { display: block; color: var(--muted); margin: -2px 0 6px; font-size: 13px; }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=email], textarea, select {
  width: 100%; border: 2px solid #cfe9dc; border-radius: 14px; padding: 11px 14px; background: #fff;
  outline: none; transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--green-bright); }
textarea { resize: vertical; min-height: 70px; }
.box { border: 3px solid var(--green-bright); border-radius: 18px; padding: 12px 14px; background: #fff; }
.box > .label { font-weight: 500; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: #e5f7ee; color: var(--green-dark); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.pill.dark { background: var(--green); color: #fff; }
.pill.challenge-pill { font-size: 17px; padding: 8px 18px; font-weight: 700; gap: 8px; }
.pill.warn { background: #fff1d6; color: #9a5b00; }
.pill.red { background: #fde2df; color: #a32319; }

/* ---------- timer ---------- */
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 22px; display: inline-block; min-width: 3.6em; text-align: center; }
.timer.paused-timer { color: var(--warn); }
.timer-strip { height: 8px; background: #d9f2e6; border-radius: 99px; overflow: hidden; }
.timer-strip > div { height: 100%; background: var(--green-bright); transition: width 1s linear; }
.timer-strip.paused-strip > div { background: var(--warn); transition: none; }

.meter { height: 22px; background: #d9f2e6; border-radius: 99px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--green-bright); border-radius: 99px; transition: width .6s ease; }

/* ---------- challenge cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ccard {
  background: var(--green); color: #fff; border: 4px solid var(--green-bright); border-radius: 20px;
  padding: 16px; cursor: pointer; text-align: center; transition: transform .1s;
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 170px;
}
.ccard:hover { transform: translateY(-2px); }
.ccard.sel { outline: 4px solid #111; }
.ccard .emoji { font-size: 48px; line-height: 1; margin: 6px 0; }
.ccard .t { font-weight: 600; font-size: 16px; }
.ccard .m { font-size: 12px; opacity: .85; }

.hero-emoji { font-size: 90px; line-height: 1; }
@keyframes waitingPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.waiting-pulse { animation: waitingPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .waiting-pulse { animation: none; } .meter-fill { transition: none; } }
.rules { display: flex; flex-wrap: wrap; gap: 10px; }
.rule {
  display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink);
  border-radius: 14px; padding: 8px 12px; font-weight: 500;
}
.rule .i { font-size: 22px; }
.rule-num { width: 56px; font: inherit; font-weight: 700; color: var(--green-dark); text-align: center; border: 2px solid var(--green-bright); border-radius: 8px; padding: 2px 4px; margin: 0 2px; }

/* ---------- coach ---------- */
.coach-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.coach-head .who { font-weight: 700; }
.msgs { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.msg { padding: 10px 14px; border-radius: 16px; max-width: 92%; white-space: pre-wrap; }
.msg.coach { background: #e8f8f0; border: 2px solid #bdebd4; align-self: flex-start; }
.msg.student { background: #f3f5f4; align-self: flex-end; }
.msg .meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.engineer-q { font-weight: 600; color: var(--green-dark); }
.msg.mistake { border-color: var(--warn); background: #fff7e6; }
.thinking { display: inline-flex; gap: 4px; }
.thinking i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: bob 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .4 } 50% { transform: translateY(-5px); opacity: 1 } }

.dots { display: inline-flex; gap: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--green-bright); }
.dots i.used { background: #d0d8d4; }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick button {
  border: 3px solid var(--green-bright); background: #fff; border-radius: 18px; padding: 14px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600;
}
.quick button .e { font-size: 42px; line-height: 1; }
.quick button:hover { background: #effaf4; }

/* ---------- plan wizard ---------- */
.pdots { display: flex; gap: 6px; flex-wrap: wrap; }
.pdot { width: 34px; height: 10px; border-radius: 99px; border: 0; background: #d9f2e6; cursor: pointer; padding: 0; }
.pdot.past { background: var(--mint-3); }
.pdot.on { background: var(--green); width: 48px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 2px solid #cfe9dc; background: #fff; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-weight: 500; font-size: 15px; transition: all .12s;
}
.chip:hover { border-color: var(--green-bright); }
.chip.big { font-size: 17px; padding: 10px 18px; }
.chip.sel { background: var(--green); border-color: var(--green); color: #fff; }
.chip.starter { border-style: dashed; color: var(--green-dark); align-self: flex-start; font-size: 14px; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pick {
  border: 3px solid #cfe9dc; background: #fff; border-radius: 18px; padding: 14px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; text-align: center;
}
.pick .e { font-size: 44px; line-height: 1; }
.pick:hover { border-color: var(--green-bright); }
.pick.sel { border-color: var(--green); background: #e0f6ea; box-shadow: 0 0 0 3px var(--green-bright); }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.part {
  border: 3px solid #cfe9dc; background: #fff; border-radius: 16px; padding: 8px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 500; font-size: 14px; position: relative;
}
.part:hover { border-color: var(--green-bright); }
.part.sel { border-color: var(--green); background: #e0f6ea; }
.part.sel::after { content: '✓'; position: absolute; top: 4px; right: 8px; color: var(--green-dark); font-weight: 800; }
.evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.evidence .big { font-size: 26px; font-weight: 800; color: var(--green-dark); }

/* ---------- science words ---------- */
mark.sci { background: var(--mark); padding: 0 2px; border-radius: 4px; }
.words { display: flex; flex-wrap: wrap; gap: 6px; }
.word { padding: 3px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: 13px; font-weight: 600; transition: all .25s; }
.word.on { background: var(--mark); color: var(--ink); transform: scale(1.06); box-shadow: 0 0 0 2px #f1d700; }

/* ---------- build mode ---------- */
.buildmode {
  text-align: center; background: var(--green); color: #fff; border-radius: 28px; padding: 50px 20px;
  border: 5px solid var(--green-bright);
}
.buildmode .big-timer { font-size: clamp(80px, 16vw, 180px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.buildmode .slogan { font-size: clamp(24px, 4vw, 40px); font-weight: 700; margin: 10px 0 24px; }

/* ---------- avatars ---------- */
.avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatars button { border: 3px solid transparent; background: #f3faf6; border-radius: 16px; padding: 8px; cursor: pointer; }
.avatars button.sel { border-color: var(--green); background: #e0f6ea; }
.av { width: 44px; height: 44px; display: inline-block; flex: none; }
.av svg { width: 100%; height: 100%; }

/* ---------- teacher board ---------- */
.tabs { display: flex; gap: 6px; }
.tabs button { border: 0; background: transparent; padding: 8px 14px; border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--muted); }
.tabs button.on { background: var(--green); color: #fff; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tile { background: #fff; border-radius: 18px; border: 4px solid #d4efe1; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.tile:hover { border-color: var(--green-bright); }
.tile.stuck { border-color: var(--warn); }
.tile .thumb { height: 90px; border-radius: 12px; background: #f1f6f3; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.stage-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.phases { display: flex; gap: 6px; flex-wrap: wrap; }
.phases span { padding: 6px 12px; border-radius: 10px; background: #fff; font-weight: 600; font-size: 14px; color: var(--muted); }
.phases span.on { background: var(--green); color: #fff; }
.phases span.past { background: #d9f2e6; color: var(--green-dark); }
.code-big { font-size: 44px; font-weight: 800; letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.stat { font-size: 40px; font-weight: 800; color: var(--green-dark); line-height: 1; }

.modal-bg { position: fixed; inset: 0; background: rgba(10,30,20,.55); z-index: 50; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 30px 12px; }
.modal { background: var(--mint); border-radius: 26px; padding: 22px; width: min(1100px, 100%); }

.projector { position: fixed; inset: 0; z-index: 60; background: var(--green); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; gap: 18px; overflow-y: auto; }
.projector .big-timer { font-size: clamp(90px, 18vw, 240px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.projector .rules .rule { font-size: 22px; }
/* High-contrast alternative to the full green fill, for projectors/rooms where that washes
   out or glares -- pale backdrop, dark text, green kept only as an accent. */
.projector.light { background: #f3faf6; color: var(--ink); }
.projector.light .rule { border: 2px solid #d9ece2; }
.projector .slogan { font-size: clamp(24px, 4vw, 40px); font-weight: 700; margin: 10px 0 24px; }
/* The presenter's content varies a lot in height between screens (a one-line title vs a
   question with a hint and a starter); keeping the primary button pinned to the same spot
   regardless -- instead of centered with the rest, which pushes it around -- makes it much
   easier to click through repeatedly without re-aiming. */
.presenter-content { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 90px; }
.presenter-nav { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 4px; background: var(--green-bright); border-radius: 4px; }
.titem { position: relative; margin-bottom: 18px; }
.titem::before { content: ''; position: absolute; left: -24px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 3px solid #fff; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 10px 18px; border-radius: 12px; z-index: 99; }

/* ---------- young band ---------- */
body.young .btn { font-size: 20px; padding: 16px 24px; }
body.young .msg { font-size: 19px; }
body.young h2 { font-size: 28px; }

/* ---------- admin table ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid #e5f3eb; }
.table td { padding: 10px; border-bottom: 1px solid #eef5f1; vertical-align: middle; }
.table tbody tr[data-id] { cursor: pointer; }
.table tbody tr[data-id]:hover { background: #f3fbf7; }

/* ---------- landing ---------- */
.landing-wrap { max-width: 980px; display: flex; flex-direction: column; gap: 22px; min-height: 100vh; }
.landing-head { text-align: center; padding-top: 18px; }
.landing-logo { width: min(300px, 70vw); height: auto; margin: 0 auto 6px; }
.landing-head h1 { margin: 0; }
.landing-head .lead { font-size: 18px; color: var(--muted); max-width: 560px; margin: 6px auto 0; }
.choices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 760px) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choice { display: flex; flex-direction: column; gap: 10px; text-align: center; padding: 26px 24px; }
.choice h2 { margin: 0; font-size: 26px; }
.choice p { margin: 0; }
.choice .btn { width: 100%; text-decoration: none; }
.choice a.small { color: var(--green-dark); }
.choice-icon { color: var(--green); }
.choice-icon svg { display: block; margin: 0 auto; }
.code-input { font-size: 34px !important; letter-spacing: 8px; text-transform: uppercase; text-align: center; font-weight: 700; }
.continue { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: inherit; border-color: var(--warn); padding: 14px 18px; }
.continue-icon { color: var(--warn); flex: none; display: flex; }
.continue, .continue * { text-decoration: none; }
.landing-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: auto; padding: 10px 4px 20px; color: var(--muted); }
.landing-foot a { color: var(--green-dark); }
.bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 40px auto; gap: 8px; align-items: center; font-size: 14px; }
.bar { height: 12px; background: #e5f3eb; border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; background: var(--green); border-radius: 99px; }
.lesson-row:hover { background: #f3fbf7; }

a { color: var(--green-dark); }