/* TASK SCREEN CHROME */
#task-screen{background:var(--parchment)}
.task-header{position:absolute;top:1.5rem;left:2rem;right:2rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.task-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text2);opacity:.6}
.timer-bar{width:200px;height:3px;background:var(--strip);position:relative;overflow:hidden}
.timer-fill{height:100%;background:var(--terra);transition:width .1s linear;width:100%}
.task-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:5rem 2rem 2rem}
@media (max-width: 720px){
  .task-header{top:.85rem;left:1rem;right:1rem;gap:.4rem;font-size:.7rem}
  .timer-bar{width:90px}
  .task-center{padding:7.5rem 1rem 1.5rem}
}

/* N-BACK TASK */
#nback-display{font-family:'Lora',serif;font-size:5rem;font-weight:500;color:var(--text1);min-height:120px;display:flex;align-items:center;justify-content:center;letter-spacing:.1em}
.nback-instruction{font-size:.75rem;color:var(--text2);letter-spacing:.1em;text-align:center;margin-top:1rem;opacity:.7}
.nback-btn{margin-top:2rem;width:80px;height:80px;border-radius:50%;background:var(--parchment2);border:2px solid var(--strip);cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--text2);transition:all .15s;letter-spacing:.05em}
.nback-btn:active{transform:scale(.94);background:var(--strip)}
/* Feedback markers — color + icon, so the signal survives color blindness. */
.nback-feedback{width:20px;height:20px;border-radius:50%;background:transparent;margin:1rem auto 0;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1;color:transparent;font-weight:500}
.nback-feedback.correct{background:var(--sage);color:var(--warm)}
.nback-feedback.correct::before{content:'\2713'} /* ✓ */
.nback-feedback.wrong{background:var(--terra);color:var(--warm)}
.nback-feedback.wrong::before{content:'\2715'}   /* ✕ */

/* PATTERN WATCH */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:280px}
.grid-tile{aspect-ratio:1;background:var(--parchment2);border:1px solid var(--strip);cursor:pointer;transition:all .15s;position:relative}
.grid-tile.active{background:var(--terra);border-color:var(--terra)}
.grid-tile.target{background:var(--terra);border-color:var(--terra)}
.grid-tile.player-pick{border:2px solid var(--text1)}

/* FOCUS DOT */
#focus-canvas{width:100%;height:360px;position:relative;overflow:hidden;background:var(--parchment);border:1px solid var(--strip)}
.focus-dot{width:22px;height:22px;border-radius:50%;background:var(--terra);position:absolute;cursor:pointer;transition:left .8s ease,top .8s ease,background .25s,transform .25s,box-shadow .25s}
/* "Changed" state pairs the sage hue with a halo + scale-up, so the cue is
   visible even to players who can't reliably distinguish terra from sage. */
/* !important overrides the inline transform set in buildFocusDot. */
.focus-dot.changed{background:var(--sage);transform:translate(-50%,-50%) scale(1.35) !important;box-shadow:0 0 0 6px var(--sage-light),0 0 0 7px var(--sage)}

/* PHRASE RECALL (legacy text input style — still used by .phrase-display) */
.phrase-display{font-family:'Lora',serif;font-size:1.4rem;font-style:italic;color:var(--text1);text-align:center;max-width:400px;line-height:1.6;min-height:4rem;display:flex;align-items:center;justify-content:center}
.phrase-input{background:var(--warm);border:1px solid var(--strip);padding:.65rem 1rem;font-family:'IBM Plex Mono',monospace;font-size:.85rem;width:320px;color:var(--text1);margin-top:1.5rem;outline:none}
.phrase-input:focus{border-color:var(--terra)}

/* DEMO — N-BACK */
.demo-nback-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Lora',serif;font-size:2.4rem;color:var(--text1);transition:opacity .15s}
.demo-nback-trail{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--text2);opacity:.55;letter-spacing:.18em}

/* DEMO — FOCUS DOT */
.demo-dot{width:14px;height:14px;border-radius:50%;background:var(--terra);position:absolute;transition:left .8s ease,top .8s ease,background .3s}
.demo-dot.changed{background:var(--sage)}

/* DEMO — PATTERN */
.demo-grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:130px}
.demo-grid-tile{aspect-ratio:1;background:var(--warm);border:1px solid var(--strip);transition:background .2s}
.demo-grid-tile.active{background:var(--terra);border-color:var(--terra)}
.demo-grid-tile.pick-ghost{box-shadow:0 0 0 2px var(--terra);background:var(--terra-light)}

/* DEMO — PHRASE */
.demo-phrase-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Lora',serif;font-style:italic;font-size:.95rem;color:var(--text1);text-align:center;max-width:240px;transition:opacity .35s}
.demo-phrase-dots{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.3rem;color:var(--text2);opacity:.5;letter-spacing:.3em}

/* DEMO — SIGNAL */
.demo-signal-header{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.1em;color:var(--text2);text-transform:uppercase}
.demo-signal-target{color:var(--terra);font-size:.9rem;margin-left:6px}
.demo-signal-stream{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);font-family:'Lora',serif;font-size:2rem;color:var(--text1);transition:opacity .15s}
.demo-signal-stream.target{color:var(--terra)}

/* PATTERN WATCH (real task) */
.pattern-prompt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-bottom:.85rem;height:14px;opacity:.7;transition:color .2s,opacity .2s}
.pattern-prompt.live{color:var(--terra);opacity:1}
.pattern-feedback{width:20px;height:20px;border-radius:50%;background:transparent;margin:1rem auto 0;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1;color:transparent;font-weight:500}
.pattern-feedback.correct{background:var(--sage);color:var(--warm)}
.pattern-feedback.correct::before{content:'\2713'}
.pattern-feedback.wrong{background:var(--terra);color:var(--warm)}
.pattern-feedback.wrong::before{content:'\2715'}

/* PHRASE RECALL (real task) */
.phrase-shell{text-align:center;width:100%;max-width:420px}
.phrase-instruction{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-bottom:1rem;opacity:.7}
.phrase-hold{font-size:.75rem;color:var(--text2);font-style:italic;font-family:'Lora',serif;opacity:.6;margin-top:1rem;height:1.4rem}
.phrase-choice-row{display:flex;flex-direction:column;gap:.4rem;margin-top:.85rem}
.phrase-choice{background:var(--parchment2);border:1px solid var(--strip);padding:.55rem .85rem;font-family:'Lora',serif;font-style:italic;font-size:.82rem;color:var(--text1);cursor:pointer;text-align:left;transition:all .15s;display:flex;align-items:center;gap:.5rem}
.phrase-choice::before{content:'';display:inline-block;width:14px;text-align:center;font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:.9rem;color:transparent;flex-shrink:0}
.phrase-choice:hover{border-color:var(--terra);background:var(--terra-light)}
.phrase-choice.correct{border-color:var(--sage);background:var(--sage-light)}
.phrase-choice.correct::before{content:'\2713';color:var(--sage)}
.phrase-choice.wrong{border-color:var(--terra);background:var(--terra-light)}
.phrase-choice.wrong::before{content:'\2715';color:var(--terra)}

/* SIGNAL STREAM (real task) */
.signal-shell{text-align:center}
.signal-header{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-bottom:.5rem;opacity:.75}
.signal-target-line{font-size:.85rem;color:var(--text2);margin-bottom:1.5rem;letter-spacing:.05em}
.signal-target-symbol{font-family:'Lora',serif;font-size:1.6rem;color:var(--terra);margin-left:.45rem;vertical-align:middle}
.signal-display{font-family:'Lora',serif;font-size:4.5rem;min-height:90px;color:var(--text1);display:flex;align-items:center;justify-content:center;transition:opacity .12s,color .12s}
.signal-display.is-target{color:var(--terra)}
.signal-btn{margin-top:1.2rem;width:80px;height:80px;border-radius:50%;background:var(--parchment2);border:2px solid var(--strip);cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--text2);transition:all .15s;letter-spacing:.05em}
.signal-btn:active{transform:scale(.94);background:var(--strip)}
.signal-feedback{width:20px;height:20px;border-radius:50%;background:transparent;margin:1rem auto 0;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1;color:transparent;font-weight:500}
.signal-feedback.correct{background:var(--sage);color:var(--warm)}
.signal-feedback.correct::before{content:'\2713'}
.signal-feedback.wrong{background:var(--terra);color:var(--warm)}
.signal-feedback.wrong::before{content:'\2715'}