/* ═══════════════════ Bellringers ═══════════════════ */

:root{
  --ink:        #10233F;
  --ink-2:      #46607C;
  --ink-3:      #7A8CA3;
  --line:       #E5EAF1;
  --line-2:     #EFF2F7;
  --paper:      #FFFFFF;
  --shell:      #FBFCFE;

  --teal:       #10999A;
  --teal-d:     #0B7B7C;
  --amber:      #F5B31B;
  --amber-d:    #D2940A;
  --coral:      #EE5B41;
  --plum:       #7B5AD5;
  --moss:       #2C9C66;
  --sky:        #2A79D0;
  --blush-i:    #E0637E;

  --t-mint:     #E7F4F0;
  --t-butter:   #FEF3D9;
  --t-blush:    #FDE8E5;
  --t-sky:      #E7F0FB;
  --t-lilac:    #EFE9FC;
  --t-pink:     #FCE7F0;
  --t-teal:     #E4F2F1;

  --board:      #F7F8FA;   /* the classroom slide ground */
  --board-2:    #EEF2F6;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --shadow: 0 1px 2px rgba(16,35,63,.05), 0 8px 24px rgba(16,35,63,.06);
  --shadow-lg: 0 24px 60px rgba(16,35,63,.16);

  --display: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--shell);
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; letter-spacing:-.02em; }

/* ═══════════════════ HEADER ═══════════════════ */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:36px;
  padding:14px 34px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-bell{ font-size:30px; line-height:1; transform:rotate(-12deg); display:inline-block; }
.brand-word{ font-family:var(--display); font-weight:800; font-size:29px; letter-spacing:-.035em; }

.site-nav{ display:flex; align-items:center; gap:30px; margin-left:12px; }
.site-nav a{
  font-size:15px; font-weight:600; color:var(--ink); padding:8px 0;
  border-bottom:3px solid transparent; position:relative;
}
.site-nav a:hover{ color:var(--teal-d); }
.site-nav a.active{ border-bottom-color:var(--amber); }
.site-nav .heart{ color:var(--ink-3); }
.fav-count{
  display:inline-block; min-width:19px; padding:1px 5px; margin-left:2px;
  background:var(--coral); color:#fff; border-radius:99px;
  font-size:11px; font-weight:700; text-align:center; vertical-align:1px;
}
.header-right{ margin-left:auto; }
.no-login{
  display:inline-block; padding:9px 16px; border-radius:99px;
  border:1px solid var(--line); background:var(--shell);
  font-size:13px; font-weight:600; color:var(--ink-2); cursor:default;
}

/* ═══════════════════ HOME LAYOUT ═══════════════════ */
.home{
  display:grid; grid-template-columns:minmax(0,1fr) 470px; gap:0;
  align-items:start; max-width:1520px; margin:0 auto;
}
.home-left{ padding:44px 40px 60px; border-right:1px solid var(--line); background:var(--paper); min-height:calc(100vh - 62px); }
.home-right{ padding:26px 30px 60px; }

.hero{ position:relative; max-width:640px; }
.hero h1{
  font-size:clamp(34px,3.6vw,50px); font-weight:800; line-height:1.03;
  margin-bottom:16px; letter-spacing:-.035em;
}
.hero h1 .spark{ color:var(--moss); font-weight:500; }
.hero p{ font-size:16.5px; line-height:1.55; color:var(--ink-2); margin:0; max-width:520px; }
.hero-swoop{ position:absolute; right:-30px; top:-4px; color:var(--amber); pointer-events:none; }
.hero-arrow{ position:absolute; right:-44px; top:52px; color:var(--teal); pointer-events:none; }

/* situation tiles */
.situations{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 34px;
}
.sit{
  display:flex; align-items:center; gap:13px;
  padding:16px 15px; border-radius:var(--r-lg);
  border:1px solid transparent; text-align:left;
  transition:transform .13s ease, box-shadow .13s ease;
}
.sit:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(16,35,63,.10); }
.sit-icon{ font-size:25px; line-height:1; flex:0 0 auto; }
.sit-label{ display:block; font-family:var(--display); font-weight:700; font-size:16px; line-height:1.15; }
.sit-sub{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.sit-chev{ margin-left:auto; color:var(--ink-3); flex:0 0 auto; }
.t-mint{background:var(--t-mint)} .t-butter{background:var(--t-butter)}
.t-blush{background:var(--t-blush)} .t-sky{background:var(--t-sky)}
.t-lilac{background:var(--t-lilac)} .t-pink{background:var(--t-pink)}

/* filter rail */
.filters{
  display:flex; flex-wrap:wrap; column-gap:0; row-gap:18px; align-items:flex-start;
  padding:18px 0 20px; border-top:1px solid var(--line-2);
}
.fgroup{ padding:0 22px; border-right:1px solid var(--line-2); }
.fgroup:first-child{ padding-left:0; }
.fgroup:last-child{ border-right:0; }
.fgroup-label{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
}
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  padding:7px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:.12s;
}
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* section head */
.sec-head{ display:flex; align-items:center; gap:11px; margin:26px 0 4px; }
.sec-head h2{ font-size:22px; font-weight:800; }
.sec-star{ font-size:20px; }
.sec-sub{ font-size:13.5px; color:var(--ink-2); margin:0 0 16px 32px; }
.sec-link{ margin-left:auto; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.sec-link:hover{ color:var(--teal-d); }

/* ═══════════════════ ACTIVITY CARDS ═══════════════════ */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:14px; overflow-x:auto; padding:4px 2px 12px;
  scroll-behavior:smooth; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail-next{
  position:absolute; right:-14px; top:44%; z-index:5;
  width:38px; height:38px; border-radius:99px; border:1px solid var(--line);
  background:var(--paper); box-shadow:var(--shadow); display:grid; place-items:center;
}
.rail-next:hover{ border-color:var(--ink-3); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:16px; }

.card{
  flex:0 0 214px; width:214px;
  border:1px solid var(--line); border-radius:14px; background:var(--paper);
  overflow:hidden; text-align:left; display:flex; flex-direction:column;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s;
}
.grid .card{ flex:1 1 auto; width:auto; }
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(16,35,63,.12); border-color:transparent; }
.card-art{
  aspect-ratio:16/9; display:grid; place-items:center; font-size:40px; position:relative;
}
.card-art.has-img{ background:var(--paper); }
.card-img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-art .fav{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:99px;
  border:0; background:rgba(255,255,255,.86); display:grid; place-items:center;
  font-size:14px; color:var(--ink-2); opacity:0; transition:.14s;
}
.card:hover .fav, .card-art .fav.on{ opacity:1; }
.card-art .fav.on{ color:var(--coral); }
.card-body{ padding:12px 13px 13px; display:flex; flex-direction:column; flex:1; }
.card-title{ font-family:var(--display); font-weight:700; font-size:15px; line-height:1.2; margin-bottom:6px; }
.card-desc{ font-size:12.5px; line-height:1.42; color:var(--ink-2); flex:1; }
.card-meta{ display:flex; align-items:center; gap:12px; margin-top:11px; font-size:12px; color:var(--ink-2); font-weight:600; }
.card-meta span{ display:inline-flex; align-items:center; gap:4px; }
.bars{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; }
.bars i{ width:3px; background:var(--ink-3); border-radius:1px; display:block; }
.bars i:nth-child(1){ height:4px } .bars i:nth-child(2){ height:7px } .bars i:nth-child(3){ height:11px }
.bars.e-low i:nth-child(2), .bars.e-low i:nth-child(3){ background:var(--line); }
.bars.e-medium i:nth-child(3){ background:var(--line); }
.bars.e-high i{ background:var(--coral); }

.art-teal{background:var(--t-teal)} .art-amber{background:var(--t-butter)}
.art-coral{background:var(--t-blush)} .art-plum{background:var(--t-lilac)}
.art-moss{background:var(--t-mint)} .art-sky{background:var(--t-sky)}
.art-blush{background:var(--t-pink)}

/* value strip */
.value-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  margin-top:34px; padding:22px 24px; border-radius:var(--r-lg); background:var(--t-mint);
}
.value{ display:flex; gap:11px; align-items:flex-start; }
.value-icon{ font-size:21px; line-height:1; }
.value b{ display:block; font-family:var(--display); font-size:14px; margin-bottom:3px; }
.value span{ font-size:12.5px; color:var(--ink-2); line-height:1.4; }

/* ═══════════════════ RIGHT COLUMN PANELS ═══════════════════ */
.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); margin-bottom:22px; overflow:hidden;
}
.panel-head{ display:flex; align-items:center; gap:10px; padding:14px 16px 12px; }
.panel-head .ph-icon{ font-size:17px; }
.panel-head b{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.panel-head span{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.panel-tag{
  margin-left:auto; padding:5px 11px; border-radius:99px; background:var(--t-mint);
  font-size:12px; font-weight:700; color:var(--teal-d); white-space:nowrap;
}

/* classroom preview */
.preview{
  margin:0 14px 14px; border-radius:var(--r-md); overflow:hidden;
  background:var(--board); border:1px solid var(--line);
  color:var(--ink); cursor:pointer; position:relative;
}
.preview:hover .preview-open{ opacity:1; }
.preview-open{
  position:absolute; inset:0; pointer-events:none; display:grid; place-items:center; opacity:0; transition:.15s;
  background:rgba(16,35,63,.42); z-index:3; font-weight:700; font-size:14px; color:#fff;
}
.preview-open span{ padding:10px 20px; border-radius:99px; background:var(--amber); color:var(--ink); }
.preview-stage{ padding:20px 16px 20px; min-height:236px; display:grid; place-items:center; }
.preview-bar{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:var(--paper); border-top:1px solid var(--line);
}
.mini-clock{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px;
  background:var(--t-mint); color:var(--teal-d); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.mini-btn{
  padding:6px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:12.5px; font-weight:600;
}
.mini-btn.amber{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.preview-bar .sp{ margin-left:auto; }

/* bellringer mode mini */
.seq-list{ padding:0 14px 14px; }
.seq-total{
  display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:9px;
  border-radius:9px; background:var(--t-mint); font-size:13px;
}
.seq-total b{ font-family:var(--display); font-size:13px; }
.seq-total .st-name{ font-weight:600; color:var(--ink); }
.seq-total .st-edit{
  margin-left:auto; padding:4px 12px; border-radius:7px; border:1px solid var(--line);
  background:var(--paper); font-size:12px; font-weight:600; color:var(--ink-2);
}
.seq-row{
  display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:10px;
  border:1px solid var(--line-2); margin-bottom:7px; background:var(--paper); text-align:left; width:100%;
}
.seq-row:hover{ border-color:var(--teal); }
.seq-time{
  flex:0 0 auto; padding:5px 9px; border-radius:7px; background:var(--t-sky);
  font-size:11.5px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.seq-icon{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:16px; }
.seq-copy b{ display:block; font-family:var(--display); font-size:13.5px; }
.seq-copy span{ display:block; font-size:11.5px; color:var(--ink-2); margin-top:1px; }
.seq-grip{ margin-left:auto; color:var(--ink-3); font-size:14px; }
.seq-actions{ display:flex; gap:9px; padding:2px 14px 14px; }
.btn{
  padding:10px 16px; border-radius:9px; border:1px solid var(--line);
  background:var(--paper); font-size:13.5px; font-weight:600; color:var(--ink);
}
.btn:hover{ border-color:var(--ink-3); }
.btn-dark{ background:var(--ink); border-color:var(--ink); color:#fff; flex:1; }
.btn-dark:hover{ background:#08182D; border-color:#08182D; }
.btn-teal{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn-teal:hover{ background:var(--teal-d); border-color:var(--teal-d); }
.btn-amber{ background:var(--amber); border-color:var(--amber); color:var(--ink); }

/* favorites card */
.fav-card{
  display:flex; gap:14px; align-items:center; padding:18px;
  background:var(--t-butter); border:1px solid #F6E3B4; border-radius:var(--r-lg);
}
.fav-card h3{ font-size:16px; margin-bottom:5px; }
.fav-card p{ font-size:13px; color:var(--ink-2); line-height:1.45; margin:0 0 11px; }
.fav-card-icon{ font-size:34px; margin-left:auto; }

/* ═══════════════════ SUB PAGES ═══════════════════ */
.page{ max-width:1180px; margin:0 auto; padding:34px 34px 70px; }
.page-head{ margin-bottom:22px; }
.page-head h1{ font-size:34px; font-weight:800; margin-bottom:7px; }
.page-head p{ font-size:15px; color:var(--ink-2); margin:0; max-width:640px; line-height:1.5; }
.page .filters{ border-top:0; border-bottom:1px solid var(--line); margin-bottom:24px; }
.result-count{ font-size:13.5px; color:var(--ink-2); margin:0 0 14px; font-weight:600; }
.empty{
  padding:44px 20px; text-align:center; border:1px dashed var(--line);
  border-radius:var(--r-lg); color:var(--ink-2);
}
.empty b{ display:block; font-family:var(--display); font-size:17px; color:var(--ink); margin-bottom:6px; }

/* builder */
.builder{
  display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:26px; box-shadow:var(--shadow);
}
.builder h3{ font-size:18px; margin-bottom:14px; }
.field{ margin-bottom:18px; }
.field > label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.minutes-input{
  width:88px; padding:9px 12px; border-radius:8px; border:1px solid var(--line);
  font-size:14px; font-weight:600; font-family:var(--body);
}
.build-out{ background:var(--shell); border-radius:var(--r-lg); padding:18px; min-height:260px; }
.build-out .seq-row{ background:var(--paper); }

/* ═══════════════════ PROJECTOR PLAYER — light board ═══════════════════
   Matches the classroom slides: near-white ground, navy ink, pastel tiles,
   direction pill bottom-left, time/energy chips bottom-right. */

.player{
  position:fixed; inset:0; z-index:200;
  background:var(--board); color:var(--ink);
  display:flex; flex-direction:column; overflow:hidden;
}
.player-mark{
  position:absolute; top:22px; left:26px; z-index:2;
  display:flex; align-items:center; gap:8px; pointer-events:none;
}
.player-mark .brand-bell{ font-size:24px; }
.player-mark .brand-word{ font-size:23px; }

.deco{ position:absolute; pointer-events:none; z-index:0; }
.deco-loop{ top:16px; right:30px; width:170px; color:#CDE7E4; }
.deco-squiggle{ bottom:168px; left:18px; width:112px; color:#CDE7E4; }

.player-stage{
  flex:1; display:grid; place-items:center; padding:4vh 5vw 1vh;
  text-align:center; overflow:auto; position:relative; z-index:1;
}

.player-foot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:0 34px 16px; position:relative; z-index:1;
}
.player-direction{
  display:flex; align-items:center; gap:12px; flex:1; min-width:260px;
  background:var(--paper); border-radius:16px; padding:14px 22px;
  box-shadow:0 2px 10px rgba(16,35,63,.06);
  font-family:var(--display); font-weight:700;
  font-size:clamp(14px,1.5vw,20px); line-height:1.35; text-align:left;
}
.player-direction::before{ content:"🗣"; font-size:1.1em; opacity:.5; flex:0 0 auto; }
.pd-text{ flex:1; }
.player-direction em{ font-style:normal; border-bottom:3px solid #CBB8F2; padding-bottom:1px; }
.player-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.pchip{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:99px;
  font-size:clamp(12px,1.2vw,15px); font-weight:700; white-space:nowrap;
}
.pchip-time{ background:var(--t-mint); color:var(--teal-d); }
.pchip-energy{ background:var(--t-lilac); color:#5B3FBF; }
.pchip-energy.e-high{ background:var(--t-blush); color:#C7402A; }

.player-bar{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  background:var(--paper); border-top:1px solid var(--line); position:relative; z-index:2;
}
.player-bar-left{ display:flex; align-items:center; gap:12px; }
.player-bar-right{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
.player-title{ font-size:13.5px; font-weight:600; color:var(--ink-2); }
.pbtn{
  padding:9px 15px; border-radius:9px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:13.5px; font-weight:600;
}
.pbtn:hover{ border-color:var(--ink-3); background:var(--shell); }
.pbtn kbd{
  font:inherit; font-size:11px; opacity:.5; margin-left:6px;
  border:1px solid var(--line); border-radius:4px; padding:0 4px;
}
.pbtn-primary{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.pbtn-primary:hover{ background:#FFC53D; border-color:#FFC53D; }
.pbtn-reveal{ background:var(--teal); border-color:var(--teal); color:#fff; }
.pbtn-reveal:hover{ background:var(--teal-d); border-color:var(--teal-d); }
.pbtn-exit{ padding:8px 12px; font-size:15px; }

.player-seq{ display:flex; gap:6px; padding:0 18px 10px; align-items:center; flex-wrap:wrap; position:relative; z-index:1; }
.seq-pip{
  padding:6px 12px; border-radius:99px; font-size:12px; font-weight:700;
  background:var(--paper); color:var(--ink-2); border:1px solid var(--line);
}
.seq-pip.now{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.seq-pip.done{ background:transparent; color:var(--ink-3); }

.timer-chip{
  position:absolute; top:18px; right:22px; z-index:4;
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:14px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow);
}
.timer-clock{ font-family:var(--display); font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; }
.timer-chip.done{ background:var(--coral); border-color:var(--coral); color:#fff; animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.55 } }
.timer-x{ border:0; background:transparent; color:var(--ink-3); font-size:14px; }

.player.notes-open .player-stage{ padding-right:calc(min(430px,92vw) + 5vw); }
.notes-panel{
  position:absolute; right:0; bottom:0; top:0; width:min(430px,92vw);
  background:var(--paper); color:var(--ink); padding:28px 26px; overflow:auto;
  box-shadow:var(--shadow-lg); z-index:6; border-left:1px solid var(--line);
}
.notes-close{ position:absolute; top:14px; right:16px; border:0; background:transparent; font-size:17px; color:var(--ink-2); }
.notes-panel h3{ font-size:19px; margin-bottom:4px; }
.notes-kicker{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.notes-panel ol{ padding-left:19px; margin:0 0 18px; }
.notes-panel li{ font-size:14px; line-height:1.55; margin-bottom:9px; color:var(--ink-2); }
.notes-say{ padding:14px 16px; border-radius:var(--r-md); background:var(--t-butter); font-size:14.5px; line-height:1.5; margin-bottom:16px; }
.notes-why{ padding:14px 16px; border-radius:var(--r-md); background:var(--t-mint); font-size:13.5px; line-height:1.5; color:var(--ink-2); }
.notes-h{ font-family:var(--display); font-size:13px; font-weight:700; margin-bottom:5px; }

/* ═══════════════════ STAGE RENDERERS ═══════════════════ */
.stage{ width:100%; max-width:1240px; }

/* the format name, flanked by her little dashes */
.stage-title{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.6vw,22px);
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(26px,4.2vw,62px); line-height:1.05; margin-bottom:clamp(12px,2vh,22px);
}
.stage-dash{ flex:0 0 auto; width:clamp(18px,2.4vw,34px); color:var(--teal); }
.stage-dash.r{ transform:scaleX(-1); }

/* the edition badge, e.g. "Little Kids" under "Pick a Side" */
.stage-badge{
  display:inline-block; margin:0 auto clamp(10px,1.6vh,18px);
  padding:clamp(5px,.9vh,10px) clamp(14px,1.8vw,26px); border-radius:99px;
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(14px,1.7vw,26px); color:var(--ink);
}

/* the prompt sits on a tinted band, like the slides */
.stage-band{
  border-radius:22px; padding:clamp(16px,2.6vh,30px) clamp(18px,3vw,40px);
  margin-bottom:clamp(14px,2.4vh,28px);
}
.band-mint{background:var(--t-mint)} .band-lilac{background:var(--t-lilac)}
.band-butter{background:var(--t-butter)} .band-blush{background:var(--t-blush)}
.band-sky{background:var(--t-sky)} .band-pink{background:var(--t-pink)}

.stage-big{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(24px,3.9vw,54px); line-height:1.12;
}
.stage-stem{ font-size:clamp(15px,1.7vw,22px); color:var(--ink-2); margin-bottom:10px; font-weight:600; }
.stage-sub{ font-size:clamp(13px,1.4vw,18px); color:var(--ink-2); margin-top:16px; line-height:1.5; }
.stage-note{
  margin-top:22px; padding:14px 22px; border-radius:14px; display:inline-block;
  background:var(--paper); border:1px solid var(--line);
  font-size:clamp(13px,1.3vw,17px); color:var(--ink-2); line-height:1.5;
}

/* duel */
.duel{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,48px); }
.duel-side{ display:grid; place-items:center; max-width:360px; position:relative; }
.duel-orb{
  width:clamp(120px,15vw,220px); height:clamp(120px,15vw,220px); border-radius:99px;
  display:grid; place-items:center; font-size:clamp(46px,6vw,86px);
  padding-bottom:clamp(18px,2vw,28px);
}
.duel-orb.a{ background:var(--t-mint); }
.duel-orb.b{ background:var(--t-blush); }
.duel-label{
  margin-top:clamp(-26px,-2vw,-18px); position:relative;
  font-family:var(--display); font-weight:700; color:#fff;
  font-size:clamp(12px,1.4vw,19px); line-height:1.2;
  padding:clamp(8px,1vw,13px) clamp(14px,1.8vw,26px); border-radius:12px;
  box-shadow:0 4px 12px rgba(16,35,63,.14);
}
.duel-side.a .duel-label{ background:var(--teal-d); }
.duel-side.b .duel-label{ background:var(--coral); }
.duel-or{
  width:clamp(50px,5vw,76px); height:clamp(50px,5vw,76px); border-radius:99px;
  display:grid; place-items:center; background:var(--paper); box-shadow:var(--shadow);
  font-family:var(--display); font-weight:700; font-size:clamp(13px,1.4vw,19px); flex:0 0 auto;
}

/* quad — four pastel tiles, her Odd One Out layout */
.quad{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,22px); }
.quad-item{
  border-radius:20px; padding:clamp(16px,2.4vw,30px) 12px;
  display:grid; gap:10px; place-items:center; align-content:center; position:relative;
  min-height:clamp(104px,14vw,240px);
}
.quad-item:nth-child(1){ background:var(--t-mint);   color:var(--teal-d); }
.quad-item:nth-child(2){ background:var(--t-lilac);  color:#7B5AD5; }
.quad-item:nth-child(3){ background:var(--t-blush);  color:var(--coral); }
.quad-item:nth-child(4){ background:var(--t-butter); color:var(--amber-d); }
.quad-num{
  position:absolute; top:10px; left:12px;
  width:26px; height:26px; border-radius:99px; background:rgba(255,255,255,.75);
  display:grid; place-items:center; font-size:12px; font-weight:800; color:inherit;
}
.quad-icon{ font-size:clamp(30px,4vw,58px); line-height:1.1; }
.quad-label{ font-family:var(--display); font-weight:800; font-size:clamp(15px,2vw,30px); line-height:1.15; }
/* number-only tiles get her oversized numerals */
.quad-item.no-icon .quad-label{ font-size:clamp(30px,4.6vw,78px); line-height:1; }
.quad-scene{ font-size:clamp(16px,2vw,26px); line-height:1.4; color:var(--ink); max-width:960px; margin:0 auto; }

/* objects */
.objects{ display:flex; justify-content:center; gap:clamp(18px,3.4vw,56px); }
.object{ display:grid; gap:12px; place-items:center; }
.object-icon{
  width:clamp(96px,11vw,168px); height:clamp(96px,11vw,168px); border-radius:26px;
  display:grid; place-items:center; font-size:clamp(44px,5.6vw,84px);
}
.object:nth-child(1) .object-icon{ background:var(--t-mint); }
.object:nth-child(2) .object-icon{ background:var(--t-lilac); }
.object:nth-child(3) .object-icon{ background:var(--t-blush); }
.object-label{ font-family:var(--display); font-weight:700; font-size:clamp(13px,1.5vw,21px); }

/* caption */
.caption-scene{ font-size:clamp(56px,12vw,158px); line-height:1.1; letter-spacing:.05em; margin:6px 0; }

/* clues */
.clues{ display:grid; gap:10px; max-width:900px; margin:0 auto; }
.clue{
  display:flex; gap:16px; align-items:flex-start; text-align:left;
  padding:12px 20px; border-radius:14px; background:var(--paper);
  box-shadow:0 2px 8px rgba(16,35,63,.05);
  font-size:clamp(14px,1.6vw,21px); line-height:1.45;
}
.clue.hidden-clue{ background:#EEF1F6; box-shadow:none; color:var(--ink-3); }
.clue-n{
  flex:0 0 auto; width:28px; height:28px; border-radius:99px; background:var(--teal); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:800;
}
.clue.hidden-clue .clue-n{ background:var(--ink-3); }
.solution{
  margin-top:14px; padding:18px 24px; border-radius:16px;
  background:var(--moss); color:#fff;
  font-size:clamp(15px,1.8vw,23px); line-height:1.45; font-weight:700;
}

/* reveal */
.answer-box{
  margin-top:22px; padding:20px 28px; border-radius:16px; background:var(--teal); color:#fff;
  font-size:clamp(15px,1.8vw,24px); line-height:1.45; display:inline-block; max-width:960px; font-weight:600;
}
.answer-note{ margin-top:14px; font-size:clamp(13px,1.3vw,17px); color:var(--ink-2); line-height:1.5; }

/* rapid — numbered pastel cards, her Beat the Teacher layout */
.rapid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,1.3vw,18px); }
.rapid-row{
  position:relative; border-radius:20px; padding:clamp(20px,2.6vw,34px) 10px clamp(14px,1.8vw,22px);
  display:grid; gap:8px; place-items:center; min-height:clamp(96px,12vw,170px);
  border:2px solid transparent;
}
.rapid-row:nth-child(1){ background:var(--t-mint);   border-color:#BCE3DC; }
.rapid-row:nth-child(2){ background:var(--t-lilac);  border-color:#D6C9F5; }
.rapid-row:nth-child(3){ background:var(--t-butter); border-color:#F6DFA6; }
.rapid-row:nth-child(4){ background:var(--t-blush);  border-color:#F7C7BE; }
.rapid-row:nth-child(5){ background:var(--t-mint);   border-color:#BCE3DC; }
.rapid-row.pending{ background:var(--shell); border-color:var(--line); color:var(--ink-3); }
.rapid-n{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:99px; color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:15px;
}
.rapid-row:nth-child(1) .rapid-n{ background:var(--teal); }
.rapid-row:nth-child(2) .rapid-n{ background:var(--plum); }
.rapid-row:nth-child(3) .rapid-n{ background:var(--amber); color:var(--ink); }
.rapid-row:nth-child(4) .rapid-n{ background:var(--coral); }
.rapid-row:nth-child(5) .rapid-n{ background:var(--teal); }
.rapid-row.pending .rapid-n{ background:var(--ink-3); }
.rapid-q{ font-family:var(--display); font-weight:800; font-size:clamp(15px,1.9vw,30px); line-height:1.15; }
.rapid-a{ font-size:clamp(12px,1.3vw,19px); color:var(--teal-d); font-weight:800; }

/* zoom — circular window, like the slide */
.zoom-frame{
  width:min(46vh,400px); height:min(46vh,400px); margin:0 auto;
  border-radius:50%; overflow:hidden; background:var(--t-mint);
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(16,35,63,.12);
}
.zoom-frame.revealed{ width:min(32vh,270px); height:min(32vh,270px); }
.zoom-frame.revealed .zoom-emoji{ font-size:min(24vh,200px); }
.zoom-emoji{ font-size:min(34vh,290px); line-height:1; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.zoom-steps{ margin-top:16px; font-size:clamp(11px,1.1vw,14px); color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; font-weight:800; }

/* ═══════════════════ compact (homepage preview) ═══════════════════ */
.preview .stage-title{ font-size:20px; margin-bottom:8px; gap:8px; }
.preview .stage-dash{ width:13px; }
.preview .stage-badge{ font-size:11px; padding:3px 10px; margin-bottom:6px; }
.preview .stage-band{ border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.preview .stage-big{ font-size:15px; line-height:1.2; }
.preview .stage-stem{ font-size:11.5px; margin-bottom:5px; }
.preview .stage-sub, .preview .stage-note{ font-size:11px; margin-top:9px; padding:7px 11px; }
.preview .duel{ gap:10px; }
.preview .duel-orb{ width:66px; height:66px; font-size:25px; padding-bottom:9px; }
.preview .duel-label{ font-size:9px; padding:5px 8px; border-radius:7px; margin-top:-11px; }
.preview .duel-or{ width:32px; height:32px; font-size:10px; }
.preview .quad{ gap:7px; }
.preview .quad-item{ padding:11px 5px; border-radius:10px; gap:4px; min-height:56px; }
.preview .quad-item.no-icon .quad-label{ font-size:20px; }
.preview .quad-icon{ font-size:21px; } .preview .quad-label{ font-size:12px; }
.preview .quad-num{ width:15px; height:15px; font-size:9px; top:5px; left:6px; }
.preview .quad-scene{ font-size:12px; }
.preview .objects{ gap:12px; }
.preview .object-icon{ width:56px; height:56px; font-size:26px; border-radius:14px; }
.preview .object-label{ font-size:10.5px; }
.preview .caption-scene{ font-size:52px; margin:2px 0; }
.preview .clues{ gap:5px; }
.preview .clue{ font-size:11px; padding:7px 9px; gap:7px; border-radius:8px; }
.preview .clue-n{ width:17px; height:17px; font-size:9px; }
.preview .answer-box, .preview .solution{ font-size:11.5px; padding:9px 11px; margin-top:9px; border-radius:9px; }
.preview .rapid{ gap:5px; }
.preview .rapid-row{ padding:14px 4px 8px; min-height:52px; border-radius:10px; gap:3px; }
.preview .rapid-q{ font-size:12px; } .preview .rapid-a{ font-size:9.5px; }
.preview .rapid-n{ width:18px; height:18px; font-size:10px; top:-8px; }
.preview .zoom-frame{ width:132px; height:132px; }
.preview .zoom-emoji{ font-size:100px; }
.preview .zoom-steps{ font-size:9px; margin-top:6px; letter-spacing:.08em; }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1180px){
  .home{ grid-template-columns:1fr; }
  .home-left{ border-right:0; min-height:0; }
  .home-right{ padding:0 32px 60px; max-width:640px; }
  .value-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .site-header{ gap:14px; padding:12px 18px; flex-wrap:wrap; }
  .site-nav{ gap:18px; order:3; width:100%; overflow-x:auto; }
  .header-right{ margin-left:auto; }
  .home-left{ padding:28px 20px 40px; }
  .home-right{ padding:0 20px 50px; }
  .situations{ grid-template-columns:1fr; }
  .filters{ gap:16px; }
  .fgroup{ padding:0; border-right:0; }
  .value-strip{ grid-template-columns:1fr; }
  .builder{ grid-template-columns:1fr; }
  .page{ padding:24px 20px 60px; }
  .quad{ grid-template-columns:repeat(2,1fr); }
  .duel{ flex-direction:column; }
  .objects{ flex-wrap:wrap; }
  .player-bar{ flex-wrap:wrap; }
  .hero-swoop,.hero-arrow{ display:none; }
}