/* IslaEd quizzes, games and certificate.
   Loaded by template-quiz-week.php and template-quiz-index.php. */

/* quizzes */
.quiz{border:2px solid var(--line);border-radius:var(--r-md);background:var(--white);margin-bottom:16px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease}
.quiz.is-open{border-color:var(--apricot);box-shadow:var(--shadow-md)}
.quiz--soon{opacity:.72}
.quiz__head{display:flex;align-items:center;gap:18px;padding:20px 24px}
.quiz__num{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--apricot);display:grid;place-items:center;text-align:center;line-height:1;font-family:var(--font-accent);font-size:1.15rem}
.quiz__num small{display:block;font-size:.5rem;letter-spacing:.14em;opacity:.8;margin-bottom:2px}
.quiz__label{flex:1}
.quiz__label strong{display:block;font-size:1.08rem;color:var(--navy)}
.quiz__label span{display:block;font-size:.92rem;color:var(--ink-soft)}
.quiz__start{flex:0 0 auto;white-space:nowrap}
.quiz__body{padding:0 24px 28px;border-top:2px solid var(--cream-deep)}
.quiz__progress{height:6px;background:var(--cream-deep);border-radius:3px;margin:20px 0 26px;overflow:hidden}
.quiz__bar{display:block;height:100%;width:0;background:var(--teal);transition:width .3s ease}
.q__count{font-family:var(--font-accent);font-size:.74rem;letter-spacing:.1em;color:var(--ink-soft);margin:0 0 .5em}
.q__text{font-family:var(--font-accent);font-size:1.18rem;color:var(--navy);margin-bottom:1em;line-height:1.3}
.q__answers{display:grid;gap:10px}
.q__answer{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px 16px;border:2px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;font-size:1rem;color:var(--ink);transition:border-color .15s ease,background .15s ease}
.q__answer:hover{border-color:var(--apricot);background:var(--cream)}
.q__letter{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--cream-deep);color:var(--navy);display:grid;place-items:center;font-family:var(--font-accent);font-size:.8rem}
.q__answer.is-right{border-color:var(--teal-dk);background:#d8f5ee}
.q__answer.is-right .q__letter{background:var(--teal-dk);color:#fff}
.q__answer.is-wrong{border-color:var(--orange);background:#fdeae1}
.q__answer.is-wrong .q__letter{background:var(--orange);color:#fff}
.q.is-answered .q__answer{cursor:default;pointer-events:none}
.q__why{margin-top:16px;padding:16px 18px;border-radius:var(--r-sm);background:var(--cream);border-left:5px solid var(--teal)}
.q__why p{font-size:.96rem;color:var(--ink-soft);margin:0 0 14px}
.quiz__result{text-align:center;padding:10px 0 4px}
.quiz__score{font-family:var(--font-display);font-size:2.6rem;color:var(--navy);line-height:1;margin:0 0 .25em}
.quiz__verdict{color:var(--ink-soft);margin:0 0 1.6em}
.quiz__cert-form label{display:block;font-family:var(--font-accent);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.quiz__cert-name{width:min(340px,100%);padding:.75em 1.1em;font-family:var(--font-body);font-size:1rem;border:2px solid var(--line);border-radius:var(--r-pill);text-align:center}
.quiz__cert-name:focus{outline:3px solid var(--teal);outline-offset:2px;border-color:var(--teal)}
.quiz__result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}

.note{max-width:1160px;margin:0 auto 24px;padding:14px 20px;background:var(--apricot-lt);border-radius:var(--r-sm);font-size:.93rem;color:#5a3d15}

/* certificate */
.cert{display:none}
@media print{
  body > *:not(.cert){display:none !important}
  .cert{display:block !important;position:fixed;inset:0;background:var(--cream);color:var(--navy)}
  .cert__inner{border:10px double var(--navy);border-radius:18px;margin:14mm;padding:22mm 18mm;text-align:center;height:calc(100% - 28mm);display:flex;flex-direction:column;justify-content:center;gap:6mm}
  .cert__eyebrow{font-family:var(--font-accent);font-size:11pt;letter-spacing:.14em;color:var(--orange)}
  .cert__title{font-family:var(--font-display);font-size:30pt;margin:0}
  .cert__awarded{font-size:12pt;color:#47586b}
  .cert__name{font-family:var(--font-display);font-size:26pt;border-bottom:2px solid var(--navy);display:inline-block;padding:0 10mm 3mm;margin:0 auto}
  .cert__for{font-size:13pt}
  .cert__score{font-family:var(--font-accent);font-size:16pt;color:var(--teal-dk)}
  .cert__date{font-size:11pt;color:#47586b}
  @page{size:landscape;margin:0}
}
@media (max-width:640px){
  .quiz__head{flex-wrap:wrap;gap:12px;padding:16px}
  .quiz__start{width:100%}
  .quiz__body{padding:0 16px 22px}
}

.game{border:2px solid var(--line);border-radius:var(--r-md);background:#fff;padding:26px 24px;margin-bottom:28px}
.game__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.game__icon{flex:0 0 54px;width:54px;height:54px;border-radius:14px;background:var(--cream);display:grid;place-items:center;overflow:hidden}
.game__icon img{width:86%;height:auto;display:block}
.game__head h3{font-family:var(--font-accent);font-size:1.12rem;margin:0 0 .25em}
.game__head p{margin:0;font-size:.94rem;color:var(--ink-soft)}
.game__status{font-family:var(--font-accent);font-size:.86rem;color:var(--teal-dk);min-height:1.6em;margin-top:16px;text-align:center}
.game__actions{text-align:center;margin-top:12px}

.match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match__col{display:grid;gap:10px;align-content:start}
.match__col h4{font-family:var(--font-accent);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 4px}
.match__item{padding:13px 15px;border:2px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;text-align:left;font-size:.97rem;width:100%;transition:all .15s ease}
.match__item:hover{border-color:var(--apricot);background:var(--cream)}
.match__item.is-sel{border-color:var(--navy);background:var(--cream-deep)}
.match__item.is-done{border-color:var(--teal-dk);background:#d8f5ee;pointer-events:none;opacity:.7}
.match__item.is-miss{border-color:var(--orange);background:#fdeae1}

.sorter{display:grid;gap:16px}
.sorter__pool{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;min-height:52px}
.tile{padding:9px 15px;border:2px solid var(--navy);border-radius:var(--r-pill);background:#fff;font-size:.9rem;color:var(--navy);cursor:pointer}
.tile.is-sel{background:var(--navy);color:#fff}
.tile.is-gone{display:none}
.sorter__bins{display:grid;gap:12px}
.bin{border:2px dashed var(--line);border-radius:var(--r-sm);padding:14px;min-height:94px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.bin:hover{border-color:var(--apricot);background:var(--cream)}
.bin h4{font-family:var(--font-accent);font-size:.82rem;color:var(--navy);margin:0 0 4px}
.bin p{margin:0 0 8px;font-size:.8rem;color:var(--ink-soft)}
.bin__items{display:flex;flex-wrap:wrap;gap:7px}
.bin__item{padding:6px 12px;border-radius:var(--r-pill);background:#d8f5ee;color:var(--teal-dk);font-size:.82rem}

.ordergame{display:grid;gap:10px}
.orow{display:flex;align-items:center;gap:12px;padding:12px 15px;border:2px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:grab}
.orow.is-right{border-color:var(--teal-dk);background:#d8f5ee}
.orow.is-wrong{border-color:var(--orange);background:#fdeae1}
.orow__grip{font-family:var(--font-accent);color:var(--ink-soft);flex:0 0 auto}
.orow.dragging{opacity:.45}

.mapgame__board{position:relative;background:#a9dcee;border-radius:var(--r-sm);padding:46px 18px}
.mapgame__svg{width:100%;height:auto;display:block}
.mapgame__target{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px dashed rgba(30,58,95,.45);background:rgba(255,255,255,.3)}
.mapgame__target.is-filled{border-style:solid;border-color:var(--teal-dk);background:var(--teal-dk)}
.mapgame__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.mapgame__label{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-accent);font-size:.72rem;color:#fff;background:var(--teal-dk);padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none}

.rain__stage{position:relative;height:290px;background:linear-gradient(180deg,#cfeaf7,#eaf6fb);border-radius:var(--r-sm);overflow:hidden}
.rain__cloud{position:absolute;top:24px;font-size:2.5rem;user-select:none}
.rain__slider{width:100%;margin-top:14px}
.rain__counts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;text-align:center}
.rain__count{background:var(--cream);border-radius:var(--r-sm);padding:12px}
.rain__count strong{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--navy);line-height:1}
.rain__count span{font-size:.8rem;color:var(--ink-soft)}
.drop{position:absolute;width:3px;height:12px;background:#2c7bb6;border-radius:2px;opacity:.75}

.mask{display:grid;grid-template-columns:1fr 270px;gap:20px;align-items:start}
.mask__canvas{background:var(--cream);border-radius:var(--r-sm);padding:14px}
.mask__row h4{font-family:var(--font-accent);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.mask__controls{display:grid;gap:15px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:32px;height:32px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.sw.is-sel{border-color:var(--navy)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{padding:7px 13px;border:2px solid var(--line);border-radius:var(--r-pill);background:#fff;cursor:pointer;font-size:.85rem}
.seg button.is-sel{border-color:var(--navy);background:var(--navy);color:#fff}

.capsule{display:grid;gap:14px}
.capsule__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cap{padding:13px 15px;border:2px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;text-align:left;font-size:.93rem}
.cap.is-sel{border-color:var(--teal-dk);background:#d8f5ee}
@media (max-width:760px){.mask{grid-template-columns:1fr}.match{grid-template-columns:1fr}}


.wf{display:grid;gap:16px}
.wf__grid{display:grid;gap:3px;justify-content:center;user-select:none;touch-action:manipulation}
.wf__cell{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:var(--cream);
  font-family:var(--font-accent);font-size:.84rem;color:var(--navy);cursor:pointer;transition:background .12s ease,color .12s ease}
.wf__cell:hover{background:var(--cream-deep)}
.wf__cell.is-start{background:var(--navy);color:#fff}
.wf__cell.is-found{background:#d8f5ee;color:var(--teal-dk)}
.wf__words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wf__word{padding:6px 13px;border-radius:var(--r-pill);background:var(--cream);font-size:.86rem;color:var(--navy)}
.wf__word.is-found{background:#d8f5ee;color:var(--teal-dk);text-decoration:line-through;opacity:.7}
@media (max-width:600px){ .wf__cell{width:24px;height:24px;font-size:.72rem} }


/* ---------- Call to action and other-weeks grid ---------- */
.quiz-cta{
  background:var(--navy); color:#e9f1f8; border-radius:var(--r-lg);
  padding:clamp(30px,4vw,52px); text-align:center; margin:34px 0 28px;
}
.quiz-cta h2{ color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:.4em; }
.quiz-cta p{ color:#c2d6e9; max-width:60ch; margin:0 auto 1.6em; }

.quiz-more h3{ font-family:var(--font-accent); font-size:1rem; color:var(--navy); margin-bottom:14px; }
.quiz-more__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.quiz-more__item{
  display:flex; align-items:center; gap:12px; padding:13px 15px; text-decoration:none;
  border:2px solid var(--line); border-radius:var(--r-sm); background:#fff;
  color:var(--navy); font-size:.94rem; transition:border-color .15s ease, background .15s ease;
}
.quiz-more__item:hover{ border-color:var(--apricot); background:var(--cream); text-decoration:none; }
.quiz-more__num{
  flex:0 0 30px; width:30px; height:30px; border-radius:9px; background:var(--navy); color:var(--apricot);
  display:grid; place-items:center; font-family:var(--font-accent); font-size:.85rem;
}

/* ---------- Certificate ---------- */
.cert{ display:none; }
@media print{
  /* Hide everything by visibility rather than display, so the
     certificate still prints when it sits inside a page wrapper. */
  body * { visibility:hidden !important; }
  .cert, .cert * { visibility:visible !important; }
  .cert{
    display:block !important; position:fixed; inset:0; z-index:9999;
    background:#a9dcee;
  }
  .cert__frame{
    position:absolute; inset:9mm;
    background:var(--cream); border:5px solid var(--navy); border-radius:9mm;
    overflow:hidden;
  }
  .cert__frame::after{
    content:''; position:absolute; inset:6mm;
    border:2.5px dashed var(--teal); border-radius:6mm; pointer-events:none;
  }
  .cert__island{
    position:absolute; left:50%; top:33%; transform:translateX(-50%);
    width:86%; height:auto; opacity:1;
  }
  .cert__inner{
    position:relative; z-index:2; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:10mm 14mm; text-align:center; color:var(--navy);
  }
  .cert__logo{ width:17mm; height:auto; margin-bottom:2mm; }
  .cert__shout{ font-family:var(--font-display); font-size:22pt; color:var(--orange); margin:0; }
  .cert__shout-en{ font-family:var(--font-accent); font-size:10pt; margin:1mm 0 7mm; letter-spacing:.08em; }
  .cert__awarded{ font-size:11pt; color:#47586b; margin:0 0 3mm; }
  .cert__name{
    font-family:var(--font-display); font-size:30pt; margin:0 0 2mm;
    border-bottom:3px solid var(--orange); padding:0 10mm 2mm;
  }
  .cert__completing{ font-size:10pt; color:#47586b; margin:3mm 0 2mm; }
  .cert__for{ font-family:var(--font-accent); font-size:14pt; margin:0 0 10mm; }
  .cert__meta{ display:flex; align-items:flex-start; justify-content:center; gap:12mm; }
  .cert__star{ position:relative; width:24mm; height:24mm; }
  .cert__star svg{ width:100%; height:100%; }
  .cert__score{
    position:absolute; inset:0; display:grid; place-items:center;
    font-family:var(--font-display); font-size:15pt; padding-bottom:3mm;
  }
  .cert__of{
    position:absolute; left:0; right:0; bottom:6mm; text-align:center;
    font-family:var(--font-accent); font-size:7pt;
  }
  .cert__star-label{
    position:absolute; left:14mm; bottom:26mm;
    font-family:var(--font-accent); font-size:7pt; color:#47586b;
  }
  .cert__datecard{
    border:2px solid var(--apricot); border-radius:4mm; background:#fff;
    padding:4mm 8mm; margin-top:3mm;
  }
  .cert__date{ display:block; font-family:var(--font-accent); font-size:12pt; }
  .cert__date-label{ display:block; font-family:var(--font-accent); font-size:7pt; color:#47586b; margin-top:1mm; }
  .cert__tagline{
    position:absolute; left:0; right:0; bottom:13mm;
    font-family:var(--font-accent); font-size:9pt; color:var(--orange); margin:0;
  }
  .cert__footer{
    position:absolute; left:0; right:0; bottom:7mm;
    font-size:8pt; color:#47586b; margin:0;
  }
  @page{ size:landscape; margin:0; }
}