/* ==========================================================
   CREATURE NOTEBOOK PAGES (eco-notes.js)
   A field-notebook page that opens over the Ecosystem Explorer:
   lined paper, a red margin rule, binder holes, a taped field
   sketch of the creature, and the learn.html topic-card pieces
   (Did you know?, Word cards, Play & learn, grown-up chips).
   ========================================================== */
.enb{--enb-paper:#fffdf6;--enb-line:rgba(71,127,137,.13);--enb-rule:rgba(185,80,47,.34);--enb-edge:#e0cfa6;--enb-ink:#26362f;--enb-hole:#16392d}

/* ---------- the button on the "Who lives here?" card ---------- */
.enb-open{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:.55rem;margin-top:.55rem;min-height:44px;padding:.4rem 1rem .4rem .45rem;border-radius:999px;border:2px solid #b9502f;background:#fff7ec;color:#8a3b21;font:600 .98rem/1 var(--display);cursor:pointer;box-shadow:0 3px 0 #e2b89c;transition:transform .15s,box-shadow .15s,background .15s}
.enb-open[hidden]{display:none}
.enb-open:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 0 #e2b89c}
.enb-open:active{transform:translateY(2px);box-shadow:0 1px 0 #e2b89c}
.enb-open:focus-visible{outline:3px solid var(--clay-yellow);outline-offset:3px}
.enb-open-ic{position:relative;width:30px;height:30px;border-radius:8px 10px 10px 8px;background:linear-gradient(90deg,#8a3b21 0 5px,#b9502f 5px);box-shadow:inset -3px 0 0 rgba(0,0,0,.12)}
.enb-open-ic i{position:absolute;left:9px;right:5px;top:8px;height:13px;border-radius:2px;background:repeating-linear-gradient(180deg,#fffdf6 0 2px,transparent 2px 4.5px)}
.enb-open-arrow{transition:transform .2s}
.enb-open:hover .enb-open-arrow{transform:translateX(3px)}

/* ---------- overlay + sheet ---------- */
html.enb-lock,html.enb-lock body{overflow:hidden}
.enb{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:clamp(12px,2.6vw,32px)}
.enb[hidden]{display:none}
.enb-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(23,63,49,.55),rgba(9,30,23,.78));opacity:0;transition:opacity .25s}
.enb.in .enb-scrim{opacity:1}
.enb-sheet{position:relative;width:min(1120px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:10px 22px 22px 10px;
  background-color:var(--enb-paper);
  background-image:linear-gradient(90deg,transparent 0 58px,var(--enb-rule) 58px 60px,transparent 60px),repeating-linear-gradient(180deg,transparent 0 31px,var(--enb-line) 31px 32px);
  background-attachment:local;border:1.5px solid var(--enb-edge);box-shadow:0 7px 0 #e7d9b6,0 30px 80px rgba(6,24,18,.45);
  opacity:0;transform:translateY(26px) rotate(-.4deg) scale(.985);transition:opacity .28s ease,transform .38s cubic-bezier(.2,1.25,.4,1)}
.enb.in .enb-sheet{opacity:1;transform:none}
/* binder holes down the left edge */
.enb-sheet::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:22px;pointer-events:none;
  background:radial-gradient(circle at 11px 11px,var(--enb-hole) 0 7px,rgba(0,0,0,.18) 7.5px 8.5px,transparent 9px) 0 44px/22px 150px repeat-y;opacity:.9}
.enb-x{position:sticky;top:10px;float:right;z-index:3;margin:10px 10px -54px 0;width:44px;height:44px;border-radius:50%;border:2px solid #b9502f;background:#fff7ec;color:#8a3b21;font:700 1.15rem/1 var(--display);cursor:pointer;box-shadow:0 3px 0 #e2b89c}
.enb-x:hover{background:#fff}
.enb-x:focus-visible,.enb-sheet button:focus-visible,.enb-sheet a:focus-visible{outline:3px solid var(--clay-yellow);outline-offset:2px}
.enb-page{padding:clamp(1.1rem,2.4vw,1.8rem) clamp(1rem,3vw,2.2rem) 1.6rem 84px;color:var(--enb-ink)}
.enb-page.swap>*{animation:enbIn .5s cubic-bezier(.2,1,.4,1) backwards}
.enb-page.swap>*:nth-child(2){animation-delay:.07s}.enb-page.swap>*:nth-child(3){animation-delay:.14s}.enb-page.swap>*:nth-child(4){animation-delay:.2s}
@keyframes enbIn{from{opacity:0;transform:translateY(12px)}}

/* ---------- header: taped field sketch + name ---------- */
.enb-head{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:1.1rem 1.8rem;align-items:center;padding:.3rem 3.2rem 1.2rem 0;border-bottom:2px dashed var(--enb-edge);margin-bottom:1.2rem}
.enb-art{position:relative;margin:.6rem 0 0;padding:10px 10px 30px;background:#fff;border:1px solid #eadcb9;box-shadow:0 10px 22px rgba(60,40,20,.16),0 2px 0 #e7d9b6;transform:rotate(-1.6deg)}
.enb-art::before,.enb-art::after{content:"";position:absolute;top:-11px;width:78px;height:22px;background:rgba(238,213,150,.78);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.enb-art::before{left:18px;transform:rotate(-6deg)}.enb-art::after{right:14px;transform:rotate(5deg);background:rgba(200,222,176,.8)}
.enb-cv{display:block;width:100%;aspect-ratio:4/3;background:radial-gradient(ellipse at 50% 42%,#fffaf0 0,#f6ecd4 70%,#efe0bd 100%);border-radius:3px}
.enb-cap{position:absolute;left:12px;right:12px;bottom:7px;font:italic 400 .82rem/1.2 var(--read);color:#7a6a50;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enb-sticker{position:absolute;right:-14px;bottom:-12px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;background:radial-gradient(circle at 35% 30%,#fff3c4,#eea52c 70%);border:3px dashed #fff;box-shadow:0 4px 10px rgba(80,50,10,.28);transform:scale(0) rotate(-30deg);transition:transform .45s cubic-bezier(.2,1.7,.4,1)}
.enb-art.starred .enb-sticker{transform:scale(1) rotate(-12deg)}
.enb-id h2{margin:.1rem 0 .35rem;font:600 clamp(2rem,4.2vw,3.1rem)/1 var(--display);color:var(--forest);outline:none}
.enb-id .nb-num{margin:0 0 .3rem;font:600 .72rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.enb-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .55rem}
.enb-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .7rem;border-radius:999px;background:#eef4dd;color:#3f6a2a;font:600 .9rem/1.1 var(--display);border:1.5px solid #c9dcae}
.enb-sz{background:#fdf1dc;color:#8a5a22;border-color:#ecd2a2}
.enb-sci{font:italic 400 1rem/1.2 var(--read);color:#6b5a40}
.enb-home{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .7rem;font-size:1rem}
.enb-home b{font:600 .72rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#7a6a50;margin-right:.1rem}
.enb-place{display:inline-flex;align-items:center;gap:.3rem;min-height:36px;padding:.25rem .75rem;border-radius:10px;background:#fff;border:1.5px solid #dccaa0;color:var(--forest);font:600 .92rem/1.1 var(--display);text-decoration:none}
.enb-place.here{background:#173f31;border-color:#173f31;color:#fff7e6}
a.enb-place:hover{background:#fff7ec;border-color:#b9502f}
.enb-quick{display:flex;flex-wrap:wrap;gap:.45rem}
.enb-quick .nb-act{cursor:pointer;font-family:var(--display)}
.enb-hear{background:#eaf2f7;border-color:#9cc0d6;color:#1f5b7e}
.enb-hear.ping{animation:enbPing .6s ease}
@keyframes enbPing{30%{transform:scale(1.06)}60%{transform:scale(.98)}}

/* ---------- body: learn column + game ---------- */
.enb-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:1.2rem 1.6rem;align-items:start}
.enb-body h3{margin:0 0 .55rem;font:600 1.12rem/1.2 var(--display);color:var(--forest)}
.enb-body h3 small{font:400 .8rem/1 var(--read);color:#7a6a50;margin-left:.3rem}
.enb-facts ul{margin:0 0 1.1rem;padding:0;list-style:none;display:grid;gap:.5rem}
.enb-facts li{position:relative;padding:.6rem .8rem .6rem 2.3rem;background:#fff;border:1px solid #eadcb9;border-radius:12px;font:400 1.04rem/1.45 var(--read)}
.enb-facts li::before{content:"💡";position:absolute;left:.7rem;top:.55rem}
.enb-facts li:nth-child(2){transform:rotate(.35deg)}.enb-facts li:nth-child(3){transform:rotate(-.3deg)}
.enb-words .word-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.enb-words .word-card{height:118px}
.enb-soon{margin:0;padding:.7rem .9rem;border-radius:12px;background:#fff6d8;border:1.5px dashed #e6c46a;font:400 .98rem/1.4 var(--read);color:#6b5a30}
.enb-game{position:relative}
.enb-game .nb-game-head{flex-wrap:wrap;align-items:center}
.enb-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-left:auto}
.enb-tabs [role=tab]{min-height:40px;padding:.35rem .8rem;border-radius:999px;border:1.5px solid #cfdcb3;background:#f5f8ec;color:#3f6a2a;font:600 .92rem/1 var(--display);cursor:pointer}
.enb-tabs [role=tab][aria-selected=true]{background:var(--leaf);border-color:var(--leaf);color:#fff;box-shadow:0 3px 0 #3f6a2a}
.enb-gbody{min-height:120px}
.enb-gbody canvas{display:block;width:100%;border-radius:12px;border:1px solid #e6dcc0;touch-action:manipulation}
.enb-cite{margin:.5rem .2rem 0;font:400 .88rem/1.4 var(--read);color:#6b5a40}
.enb-game .g-msg{font-family:var(--read)}
.enb-game .g-btn.right{background:#5f8a3e;color:#fff;box-shadow:0 4px 0 #3f6a2a}
.enb-game .g-btn.wrong{background:#f6dcd2;color:#8a3b21;box-shadow:0 4px 0 #e2b89c}
.enb-game .g-btn:disabled{cursor:default}

/* build me */
.enb-build{background:#fff;border-radius:12px}
.enb-counters{display:grid;gap:.45rem;margin-top:.6rem}
.enb-ctr{display:grid;grid-template-columns:minmax(0,1fr) 48px 3.2rem 48px;align-items:center;gap:.45rem;padding:.3rem .35rem .3rem .75rem;border-radius:14px;background:#faf6e8;border:1.5px solid #eadcb9;transition:background .2s,border-color .2s}
.enb-ctr.ok{background:#eef6e2;border-color:#9dc17a}
.enb-ctr-l{font:600 1rem/1.1 var(--display);color:var(--forest)}
.enb-ctr .g-btn{flex:none;min-height:44px;padding:0 0 .12rem;font:700 1.7rem/1 var(--display)}
.enb-ctr-n{text-align:center;font:700 1.45rem/1 var(--display);color:#8a3b21}
.enb-ctr.ok .enb-ctr-n{color:#3f6a2a}
.enb-ctr.ok .enb-ctr-n::after{content:" ✓";font-size:.9rem}

/* how big am I? */
.enb-guess .g-btn{flex:1 1 30%}

/* where in the USA? 11 x 8 tiles + ocean labels */
.enb-map{display:grid;grid-template-columns:.9fr repeat(11,minmax(0,1fr)) .9fr;grid-template-rows:auto repeat(8,auto) auto;gap:3px;padding:.5rem;border-radius:14px;background:#f7f2e2;border:1px solid #e6dcc0}
.enb-map.sea{background:linear-gradient(180deg,#e6f1f4,#d6e9ef)}
.enb-tile{aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:6px;background:#e3d8b8;color:#6b5a40;font:600 clamp(.56rem,1.05vw,.74rem)/1 var(--display);cursor:pointer;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);transition:background .15s,transform .15s}
.enb-map.sea .enb-tile{background:#e9dfc1}
.enb-tile:hover{background:#f4d58a;color:#5a3a12;transform:translateY(-1px)}
.enb-tile.home{background:#bcd89c;color:#2f5a2a}
.enb-tile.got{background:#5f8a3e;color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px #5f8a3e;position:relative;z-index:1}
.enb-tile.nope,.enb-ocean.nope,.enb-food.nope{animation:enbNope .42s ease}
@keyframes enbNope{25%{transform:translateX(-3px) rotate(-3deg)}50%{transform:translateX(3px) rotate(3deg)}75%{transform:translateX(-2px)}}
.enb-ocean{align-self:stretch;justify-self:stretch;min-height:30px;padding:.2rem;border:1.5px dashed #6fa8bf;border-radius:10px;background:rgba(255,255,255,.45);color:#1f5b7e;font:600 .78rem/1.1 var(--display);cursor:pointer}
.enb-ocean:hover{background:#fff}
.enb-ocean.home{background:#cfe6ee;border-style:solid}
.enb-ocean.got{background:#1f5b7e;color:#fff;border-style:solid}
.o-pacific{grid-column:1;grid-row:3/9;writing-mode:vertical-rl;transform:rotate(180deg)}
.o-atlantic{grid-column:13;grid-row:3/9;writing-mode:vertical-rl}
.o-gulf{grid-column:5/9;grid-row:10}
.o-arctic{grid-column:2/7;grid-row:1}
.enb-map .enb-tile{grid-column:calc(var(--x) + 2);grid-row:calc(var(--y) + 2)}
.enb-map:not(.sea){grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(8,auto)}
.enb-map:not(.sea) .enb-tile{grid-column:calc(var(--x) + 1);grid-row:calc(var(--y) + 1)}

/* what's on my menu? */
.enb-plate{display:flex;align-items:center;gap:.6rem;min-height:58px;margin:.2rem 0 .6rem;padding:.45rem .8rem;border-radius:999px;background:#fff;border:2px dashed #cdb88a}
.enb-plate-l{font:600 .72rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#7a6a50;white-space:nowrap}
.enb-plate-items{display:flex;flex-wrap:wrap;gap:.3rem;font-size:1.7rem;line-height:1}
.enb-plate-items span{animation:enbDrop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes enbDrop{from{transform:translateY(-16px) scale(.5);opacity:0}}
.enb-foods{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.5rem}
.enb-food{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-height:84px;padding:.55rem .4rem;border-radius:16px;border:2px solid #e0cfa6;background:#fffaf0;color:var(--forest);font:600 .98rem/1.15 var(--display);text-transform:capitalize;cursor:pointer;box-shadow:0 4px 0 #e7d9b6;transition:transform .12s,background .15s}
.enb-food:hover:not(:disabled){transform:translateY(-2px);background:#fff}
.enb-food-ic{font-size:1.8rem;line-height:1}
.enb-food.got{background:#eef6e2;border-color:#9dc17a;color:#3f6a2a;box-shadow:0 2px 0 #b7d196}
.enb-food.got::after{content:"✓ yes";font-size:.75rem}
.enb-food.nope{background:#f7ece6;border-color:#e6c1ae;color:#9a6a55;opacity:.8;box-shadow:none}
.enb-food.nope::after{content:"not me";font-size:.75rem}
.enb-food:disabled{cursor:default}

/* footer actions */
.enb-actions{margin-top:1.3rem}
.enb-actions .nb-act{cursor:pointer;font-family:var(--display)}
.enb-page .nb-skills{margin-top:1rem}

/* ---------- sizes ---------- */
@media(max-width:980px){
  .enb-body{grid-template-columns:1fr}
  .enb-head{grid-template-columns:minmax(180px,260px) minmax(0,1fr)}
}
@media(max-width:640px){
  .enb{padding:0;place-items:stretch}
  .enb-sheet{width:100%;height:100%;max-height:none;border-radius:0;border:0;box-shadow:none;background-image:linear-gradient(90deg,transparent 0 22px,var(--enb-rule) 22px 24px,transparent 24px),repeating-linear-gradient(180deg,transparent 0 31px,var(--enb-line) 31px 32px);transform:translateY(40px)}
  .enb-sheet::before{display:none}
  .enb-page{padding:.9rem 16px 2rem 36px}
  .enb-x{margin:8px 8px -52px 0}
  .enb-head{grid-template-columns:1fr;padding-right:0;gap:.8rem}
  .enb-art{max-width:300px;width:78%;margin:.9rem auto 0}
  .enb-id{text-align:left}
  .enb-id h2{font-size:2.1rem;padding-right:0}
  .enb-words .word-cards{gap:.4rem}
  .enb-words .word-card{height:112px}
  .enb-actions .nb-act,.enb-quick .nb-act{flex:1 1 100%;justify-content:center}
  .enb-ctr{grid-template-columns:minmax(0,1fr) 44px 2.6rem 44px;padding-left:.55rem}
  .enb-map{gap:2px;padding:.35rem}
  .enb-map.sea{grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:auto auto repeat(8,auto) auto}
  .enb-map.sea .enb-tile{grid-column:calc(var(--x) + 1);grid-row:calc(var(--y) + 3)}
  .enb-map.sea .o-arctic{grid-column:1/7;grid-row:1}
  .enb-map.sea .o-pacific{grid-column:1/6;grid-row:2;writing-mode:horizontal-tb;transform:none}
  .enb-map.sea .o-atlantic{grid-column:7/12;grid-row:2;writing-mode:horizontal-tb}
  .enb-map.sea .o-gulf{grid-column:3/10;grid-row:11}
  .enb-foods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .enb-tabs{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .enb-sheet,.enb-scrim,.enb-sticker{transition:none}
  .enb-page.swap>*,.enb-tile.nope,.enb-ocean.nope,.enb-food.nope,.enb-plate-items span,.enb-hear.ping{animation:none}
}