/* ═══════════════════════════════════════════════════════
   THEMynd · 心靈庭園 — gamified cognitive assessment
   hand-painted watercolor aesthetic, original illustration
═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* sky & land */
  --sky-h:   #e8d9bc;   /* warm dawn */
  --sky-m:   #c2dff5;
  --sky-d:   #89b4d6;
  --sage:    #aacfaa;
  --meadow:  #7ab88a;
  --forest:  #3a6848;
  --fdeep:   #1e3c28;
  /* parchment */
  --cream:   #f5f0e4;
  --parch:   #ede7d5;
  --parch-d: #d9cfb4;
  --wcbdr:   rgba(200,188,154,.6);
  /* ink + warm */
  --ink:     #1a2030;
  --inkw:    #2c2416;
  --dim:     #8a7a60;
  --amber:   #d4931a;
  --agold:   #f0c858;
  --rose:    #c4758a;
  --lav:     #8878b8;
  --teal:    #38c490;
  /* domain dots (spirits) */
  --d-mem:   #4888c8;
  --d-inh:   #c05570;
  --d-flex:  #c8921c;
  --d-att:   #7050c8;
  --d-exe:   #3aa878;
  --d-vis:   #c87030;

  --serif:   'Noto Serif TC',Georgia,serif;
  --round:   'Nunito',sans-serif;
  --italic:  'Crimson Pro',Georgia,serif;
}

html,body{
  height:100%;
  background:#dfe8d4;
  font-family:var(--serif);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* paper grain overlay — scoped to artboards */
.paper-grain::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 24%,rgba(80,60,30,.08),transparent),
    radial-gradient(1px 1px at 62% 78%,rgba(80,60,30,.06),transparent),
    radial-gradient(1.2px 1.2px at 88% 14%,rgba(80,60,30,.05),transparent),
    radial-gradient(1px 1px at 32% 64%,rgba(80,60,30,.06),transparent);
  background-size:180px 180px,220px 220px,160px 160px,200px 200px;
  mix-blend-mode:multiply;opacity:.55;z-index:3;
}

/* ═══════════════════════════════════════════════════════
   ARTBOARD — game scene frame
═══════════════════════════════════════════════════════ */
.game-scene{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--cream);
  isolation:isolate;
}

/* HUD across top of any artboard */
.hud{
  position:absolute;top:0;left:0;right:0;
  padding:14px 18px 12px;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,rgba(245,240,228,.94),rgba(245,240,228,.62) 70%,transparent);
  z-index:8;pointer-events:none;
}
.hud .chapter{
  font-family:var(--italic);font-style:italic;
  font-size:11px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;
}
.hud .title{
  font-family:var(--serif);font-weight:700;
  font-size:17px;color:var(--forest);letter-spacing:.04em;
  line-height:1;
}
.hud .subtitle{
  font-family:var(--italic);font-style:italic;
  font-size:11.5px;color:var(--dim);margin-top:3px;
}
.hud .hud-c{flex:1;}
.hud .hud-r{
  display:flex;gap:10px;align-items:center;
  font-family:var(--round);font-size:10.5px;
  color:var(--inkw);
}
.hud .chip{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(140,120,90,.25);
  padding:4px 9px;border-radius:11px;
  display:flex;align-items:center;gap:5px;
  font-weight:700;
  backdrop-filter:blur(4px);
}
.hud .chip .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 6px currentColor;
}

/* footer protocol strip */
.scroll{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 18px 12px;
  background:linear-gradient(0deg,rgba(30,60,40,.92),rgba(30,60,40,.55) 70%,transparent);
  z-index:8;pointer-events:none;
  color:rgba(245,240,228,.92);
  font-family:var(--round);font-size:10.5px;line-height:1.55;
  letter-spacing:.02em;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
}
.scroll .protocol{flex:1;max-width:62%;}
.scroll .protocol b{color:var(--agold);font-weight:800;letter-spacing:.04em;}
.scroll .metrics{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
.scroll .m{
  background:rgba(240,200,88,.14);
  border:1px solid rgba(240,200,88,.35);
  color:var(--agold);font-weight:700;font-size:10px;
  padding:3px 7px;border-radius:3px;
  letter-spacing:.04em;
}

/* stage — canvas sits here */
.stage{position:absolute;inset:0;z-index:1;}
.stage canvas{display:block;width:100%!important;height:100%!important;}

/* instruction card bottom-center */
.instr{
  position:absolute;left:50%;bottom:76px;transform:translateX(-50%);
  z-index:6;pointer-events:none;
  background:rgba(245,240,228,.88);
  border:1px solid rgba(140,120,90,.3);
  border-radius:6px;
  padding:8px 16px;
  font-family:var(--serif);font-size:13px;
  color:var(--inkw);font-weight:600;letter-spacing:.06em;
  box-shadow:0 4px 14px rgba(30,40,20,.18);
  backdrop-filter:blur(6px);
}

/* trial-counter dots top-left */
.trial-dots{
  position:absolute;top:62px;left:18px;z-index:6;pointer-events:none;
  display:flex;gap:4px;align-items:center;
  font-family:var(--round);font-size:10px;color:var(--dim);font-weight:700;letter-spacing:.1em;
}
.trial-dots .dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(140,120,90,.3);
}
.trial-dots .dot.on{background:var(--forest);box-shadow:0 0 5px currentColor;}
.trial-dots .dot.hit{background:var(--teal);box-shadow:0 0 6px currentColor;}
.trial-dots .dot.miss{background:var(--rose);}

/* score / reward tokens */
.reward{
  position:absolute;top:62px;right:18px;z-index:6;pointer-events:none;
  display:flex;gap:6px;align-items:center;
  font-family:var(--round);font-size:11px;color:var(--inkw);font-weight:800;
}
.reward .star{
  color:var(--agold);font-size:14px;line-height:1;
  filter:drop-shadow(0 0 5px rgba(240,200,88,.7));
}

/* ═══════════════════════════════════════════════════════
   DESIGN-CANVAS ARTBOARD TITLES override
═══════════════════════════════════════════════════════ */
body{background:#e6ecdd;}

/* focus-mode: let artboard fill viewport cleanly */