/* ============================================================================
   TheoryBoard — Phases 1–5
   THIS PASS:
     - flap now carries paper grain (no more pristine white back)
     - peel timing sequences BOTH ways (hover: corner->flap ; exit: flap->corner)
     - flap grows from the BOTTOM-RIGHT corner outward (where the finger drags)
     - PHASE 5: camera — click a note -> glide+zoom to centre it under the light,
       dim the rest, peel it, unfold a detail card; click away / Esc to ease back out
============================================================================ */
:root{
  --void-1:#0d0b08; --void-2:#05040a;
  --cork-1:#c69356; --cork-2:#a3702f; --cork-3:#6c451f;
  --wood-1:#5a3c22; --wood-2:#2f1d10;
  --paper:#ece3cf; --ink:#1b1611; --ink-soft:#574a39; --yarn:#b8302a;
  --sticky-yellow:#e7cf57; --sticky-pink:#e3a4b8; --sticky-blue:#a6c9da; --sticky-green:#c3d796; --sticky-orange:#ecb06a;
  --font-head:'Oswald','Arial Narrow',sans-serif; --font-news:'PT Serif',Georgia,serif;
  --font-type:'Special Elite','Courier New',monospace; --font-hand:'Caveat','Segoe Print',cursive; --font-marker:'Permanent Marker','Caveat',cursive;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--font-news); color:var(--paper); background:var(--void-2); overflow:hidden;}

#room{position:fixed; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; text-align:center;
  background:radial-gradient(120% 90% at 50% 38%, #241a10 0%, #120d08 45%, var(--void-1) 72%, var(--void-2) 100%);}
#room.locked{overflow:hidden}
#spotlight{position:fixed; inset:0; pointer-events:none; z-index:40; mix-blend-mode:screen;
  background:
    radial-gradient(38% 30% at 50% 40%, rgba(255,233,186,.27) 0%, rgba(255,217,158,.13) 46%, rgba(255,200,140,0) 72%),
    radial-gradient(64% 54% at 50% 42%, rgba(255,206,140,.10) 0%, rgba(255,196,130,0) 70%);
  animation:flicker 7s ease-in-out infinite, drift 26s ease-in-out infinite;}
#vignette{position:fixed; inset:0; pointer-events:none; z-index:41; mix-blend-mode:multiply;
  background:
    radial-gradient(116% 92% at 50% 40%, rgba(0,0,0,0) 30%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.66) 84%, rgba(0,0,0,.9) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 78%, rgba(0,0,0,.55) 100%);}
@keyframes flicker{0%,100%{opacity:1} 47%{opacity:.97} 48%{opacity:.86} 49%{opacity:.99} 72%{opacity:1} 73%{opacity:.9} 74%{opacity:1}}

.board-frame{position:relative; display:inline-block; text-align:left; z-index:10; padding:20px; border-radius:8px; transform-origin:0 0; margin:46px auto 80px;
  background:linear-gradient(135deg,var(--wood-1),var(--wood-2) 60%,#1a1009);
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 40px 90px -20px rgba(0,0,0,.85), 0 8px 24px rgba(0,0,0,.6);}
.board-frame::after{content:""; position:absolute; inset:14px; border-radius:4px; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5) inset;}
#board{position:relative; border-radius:3px; overflow:hidden;
  background:radial-gradient(140% 120% at 30% 20%, var(--cork-1), var(--cork-2) 45%, var(--cork-3) 100%); box-shadow:0 0 60px rgba(0,0,0,.5) inset;}
.cork{position:absolute; inset:0; pointer-events:none; background-size:cover; background-repeat:no-repeat}
#content{position:absolute; inset:0}
#yarn{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:visible; transition:opacity .3s ease}

.pin{position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; z-index:6;
  background:radial-gradient(circle at 35% 30%, #fff7, #d23b34 38%, #8c211c 75%); box-shadow:0 4px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.4) inset;}
.pin::after{content:""; position:absolute; left:50%; top:60%; width:2px; height:9px; transform:translateX(-50%); background:rgba(0,0,0,.25); border-radius:2px;}
.pin.blue{background:radial-gradient(circle at 35% 30%,#fff7,#3b7fd2 38%,#1c4d8c 75%)} .pin.green{background:radial-gradient(circle at 35% 30%,#fff7,#46b06a 38%,#1f6c3c 75%)} .pin.yellow{background:radial-gradient(circle at 35% 30%,#fff7,#e3b22a 38%,#9c7a14 75%)}
.pin.hub{position:absolute; left:0; top:0; transform:none; width:22px; height:22px; z-index:5; transition:opacity .3s ease}
.tape{position:absolute; z-index:6; height:24px; width:78px; opacity:.78; box-shadow:0 1px 3px rgba(0,0,0,.25); top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(228,224,205,.35));}
.tape::before,.tape::after{content:""; position:absolute; top:0; bottom:0; width:6px}
.tape::before{left:0; background:linear-gradient(90deg, rgba(0,0,0,.08), transparent)} .tape::after{right:0; background:linear-gradient(270deg, rgba(0,0,0,.08), transparent)}

.clipping{position:absolute; width:340px; z-index:4; background:var(--paper); color:var(--ink); padding:18px 20px 16px; transition:opacity .3s ease;
  box-shadow:0 1px 1px rgba(0,0,0,.3), 0 16px 34px -10px rgba(0,0,0,.62), 0 3px 8px rgba(0,0,0,.35);
  clip-path:polygon(0 2%,4% 0,30% 1.5%,55% 0,78% 1.5%,100% 0,99% 35%,100% 70%,98.5% 100%,60% 98.5%,32% 100%,6% 99%,0 97%);}
.clipping .paper-grain{position:absolute; inset:0; width:100%; height:100%; background:var(--grain); background-size:150px; opacity:.42; mix-blend-mode:multiply; pointer-events:none}
.clipping .wrinkle{position:absolute; inset:0; background:var(--mottle); background-size:260px; mix-blend-mode:soft-light; opacity:.6; pointer-events:none}
.clipping::before{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(118deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.06) 50%, rgba(0,0,0,0) 60%), linear-gradient(200deg, rgba(255,255,255,.18), rgba(0,0,0,.05) 70%);}
.clipping > *{position:relative}
.clipping .eyebrow{font-family:var(--font-type); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1.5px solid var(--ink); padding-bottom:6px; margin-bottom:8px; display:flex; justify-content:space-between;}
.clipping h1{font-family:var(--font-head); font-weight:700; text-transform:uppercase; font-size:30px; line-height:.98; margin:0 0 6px;}
.clipping .subhead{font-style:italic; font-size:15px; color:#2c241a; margin:0 0 6px;}
.clipping .dateline{font-family:var(--font-type); font-size:11px; color:var(--ink-soft);}
.clipping .photo{margin-top:10px; height:96px; border:1px solid rgba(0,0,0,.3); display:grid; place-items:center; color:#6a5d48; font-family:var(--font-type); font-size:10px;
  background:repeating-linear-gradient(45deg,#cfc4ac,#cfc4ac 6px,#c4b8a0 6px,#c4b8a0 12px);}

.note-wrap{position:absolute; display:inline-block; cursor:pointer; z-index:3;
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left;
  transform:rotate(var(--rot,0deg)); transform-origin:center;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.32));
  transition:filter .25s ease, transform .2s ease, opacity .3s ease;}
.note-wrap:focus-visible{outline:3px solid #fff; outline-offset:4px}
.note-wrap:hover{transform:rotate(var(--rot,0deg)) translateY(-3px); z-index:9;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));}
.note-wrap.is-focused{z-index:30;}

.note-paper{position:relative; width:max-content; max-width:212px; min-width:128px; padding:14px 14px 16px; color:#2a2410;
  background-color:var(--sticky-yellow);
  background-image:linear-gradient(150deg, rgba(255,255,255,.16), rgba(0,0,0,0) 34%, rgba(0,0,0,.045) 78%, rgba(0,0,0,.11));
  clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);
  transition:clip-path .18s ease .10s;}                              /* EXIT: corner refills almost in sync with the flap fold */
.note-paper::before{content:""; position:absolute; inset:0; background:var(--grain); background-size:150px; mix-blend-mode:multiply; opacity:.30; pointer-events:none; z-index:0;}
.note-paper .wrinkle{position:absolute; inset:0; background:var(--mottle); background-size:260px; mix-blend-mode:soft-light; opacity:.55; pointer-events:none; z-index:0;}
.note-paper .crease{position:absolute; left:-20%; width:140%; height:11px; pointer-events:none; z-index:0; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.22) 42%, rgba(0,0,0,.10) 60%, transparent);}
.note-paper .eyebrow,.note-paper .title,.note-paper .snippet{position:relative; z-index:1}
.note-paper .eyebrow{font-family:var(--font-type); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#7a6a3f; margin-bottom:4px;}
.note-paper .title{font-family:var(--font-marker); font-size:18px; line-height:1.04; color:#221d0e;}
.note-paper .snippet{font-family:var(--font-hand); font-size:17px; line-height:1.1; margin-top:5px; color:#3a3220;}
.note-paper.c-pink{background-color:var(--sticky-pink)} .note-paper.c-blue{background-color:var(--sticky-blue)}
.note-paper.c-green{background-color:var(--sticky-green)} .note-paper.c-orange{background-color:var(--sticky-orange)}
.note-paper.orphan{background-color:#efe7d4; color:#3a3122; max-width:188px;}
.note-paper.orphan .title{font-family:var(--font-hand); font-weight:700; font-size:19px; color:#322a1c}
.note-paper.orphan .eyebrow{color:#9a3b34}

/* ---- polaroid (an image note) — white photo-paper border + handwritten caption.
   Fixed frame size keeps runLayout's offset measurement deterministic before load,
   and object-fit:cover crops any aspect to the iconic square. No filters/blends on
   the image itself (keeps it crisp through the camera zoom). ----------------------- */
.note-paper.polaroid{background-color:#fbf9f1; background-image:linear-gradient(150deg, rgba(255,255,255,.5), rgba(0,0,0,0) 40%, rgba(0,0,0,.06));
  width:206px; max-width:206px; min-width:206px; padding:11px 11px 0;}
.note-paper.polaroid .photo-frame{position:relative; width:100%; height:178px; overflow:hidden; z-index:1;
  background:#23201a; box-shadow:0 1px 2px rgba(0,0,0,.5) inset;}
.note-paper.polaroid .photo-frame img{display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none;}
.note-paper.polaroid .photo-frame::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(125deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.14));}    /* a little vintage corner shade, paint not filter */
.note-paper.polaroid .pcaption{position:relative; z-index:1; font-family:var(--font-marker); font-size:15.5px; line-height:1.06;
  color:#221d0e; text-align:center; padding:9px 4px 6px;}
.note-paper.polaroid .psnippet{position:relative; z-index:1; font-family:var(--font-hand); font-size:15px; line-height:1.12;
  color:#4a4026; text-align:center; padding:0 6px 11px;}

/* ---- centerpiece photo (centerpiece.image): pasted-in newspaper print ---- */
.clipping .clip-photo{position:relative; margin-top:10px; height:150px; overflow:hidden; border:1px solid rgba(0,0,0,.35);
  background:#cfc4ac; box-shadow:0 1px 2px rgba(0,0,0,.3) inset;}
.clipping .clip-photo img{display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05); -webkit-user-drag:none;}

/* ---- examine view: the photo enlarged inside the focused/zoomed detail card ---- */
.detail-board .detail-photo{position:relative; margin:0 0 11px; max-height:340px; overflow:hidden; padding:7px 7px;
  background:#fbf9f1; box-shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 16px -6px rgba(0,0,0,.5);}
.detail-board .detail-photo img{display:block; width:100%; max-height:300px; object-fit:contain; background:#23201a; -webkit-user-drag:none;}

/* folded-up corner flap (sibling so the paper clip can't eat it). Grows from the
   BOTTOM-RIGHT corner outward; carries paper grain so the underside isn't pristine. */
.flap{position:absolute; right:0; bottom:0; width:42px; height:42px; z-index:2; pointer-events:none;
  background:linear-gradient(135deg, #efe7d2 0%, #ddd3bc 50%, #c6bba3 100%);
  filter:drop-shadow(2px 2px 2px rgba(0,0,0,.3));
  clip-path:polygon(50% 50%, 100% 0%, 0% 100%);                      /* collapsed ON the fold line -> unrolls from the crease */
  transition:clip-path .16s ease;}                                   /* EXIT: flap folds back first (no delay) */
.flap::before{content:""; position:absolute; inset:0; background:var(--grain); background-size:120px; mix-blend-mode:multiply; opacity:.4;}
.note-wrap:hover .note-paper, .note-wrap.is-focused .note-paper{clip-path:polygon(0 0,100% 0,100% calc(100% - 42px),calc(100% - 42px) 100%,0 100%); transition:clip-path .18s ease;}
.note-wrap:hover .flap, .note-wrap.is-focused .flap{clip-path:polygon(0% 0%, 100% 0%, 0% 100%); transition:clip-path .17s ease .10s;}  /* ENTER: unfold almost in sync with the corner shrink */

/* ---- focus dimming + detail card (Phase 5) ------------------------------- */
#content.focusing .note-wrap:not(.is-focused){opacity:.14; pointer-events:none}
#content.focusing #yarn{opacity:.16}
#content.focusing .clipping:not(.is-focused){opacity:.18}
#content.focusing .pin.hub{opacity:.16}
.detail-board{position:absolute; z-index:60; width:max-content; max-width:300px; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); padding:18px 20px 16px;
  box-shadow:0 2px 3px rgba(0,0,0,.34), 0 30px 60px -12px rgba(0,0,0,.78), 0 8px 20px rgba(0,0,0,.4); transform:rotate(-.8deg) scale(.94); opacity:0;
  transition:opacity .25s ease .12s, transform .25s ease .12s;
  clip-path:polygon(0 1.5%,3% 0,42% 1%,72% 0,100% 1.5%,99% 50%,100% 99%,55% 100%,22% 99%,0 100%);}
.detail-board.show{opacity:1; transform:rotate(-.8deg) scale(1);}
.detail-board .paper-grain{position:absolute; inset:0; background:var(--grain); background-size:150px; opacity:.4; mix-blend-mode:multiply; pointer-events:none}
.detail-board .wrinkle{position:absolute; inset:0; background:var(--mottle); background-size:260px; mix-blend-mode:soft-light; opacity:.5; pointer-events:none}
.detail-board > *{position:relative; flex:0 0 auto}   /* heading/photo/links keep their size; only .body flexes + scrolls */
.detail-board .eyebrow{font-family:var(--font-type); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
.detail-board h3{font-family:var(--font-head); text-transform:uppercase; font-weight:700; font-size:20px; line-height:1.02; margin:0 0 9px}
/* flex scroll region: when JS caps the card height to fit the viewport, the body takes the
   remaining space and scrolls internally (heading + photo stay pinned, close stays reachable). */
.detail-board .body{font-family:var(--font-news); font-size:13.5px; line-height:1.5; flex:1 1 auto; min-height:0; overflow:auto; padding-right:14px}  /* right pad keeps the scrollbar off the text; JS widens the card by the scrollbar width so the text isn't squished */
.detail-board .body p{margin:0 0 8px}
.detail-board .links{margin-top:10px; padding-top:8px; border-top:1px solid rgba(0,0,0,.2); font-family:var(--font-type); font-size:11px}
.detail-board .links a{color:#7a2620}
.detail-board .close{position:absolute; top:5px; right:9px; border:0; background:none; font-family:var(--font-type); font-size:16px; cursor:pointer; color:var(--ink-soft); z-index:2}

#tag{position:fixed; left:14px; bottom:12px; z-index:70; font-family:var(--font-type); font-size:11px; color:#caa46a; opacity:.7; letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){ #spotlight{animation:none} .note-wrap,.note-paper,.flap,.board-frame,.detail-board{transition:none !important} }

/* ===================== PHASE 6 — ATMOSPHERE (all fixed overlays, never transformed) ===================== */
#spotlight{animation:flicker 7s ease-in-out infinite, drift 26s ease-in-out infinite;}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  22%{transform:translate(0.9%,0.7%) scale(1.020)}
  44%{transform:translate(-0.8%,1.1%) scale(1.012)}
  66%{transform:translate(-1.1%,-0.5%) scale(1.028)}
  82%{transform:translate(0.7%,-0.9%) scale(1.008)}
  100%{transform:translate(0,0) scale(1)}}
#spotlight-focus{position:fixed; inset:0; pointer-events:none; z-index:40; mix-blend-mode:screen; opacity:0; transition:opacity .55s ease;
  background:radial-gradient(24% 22% at 50% 46%, rgba(255,231,176,.40) 0%, rgba(255,214,150,.18) 42%, rgba(255,200,140,0) 72%);
  animation:flicker 7s ease-in-out infinite, drift 26s ease-in-out infinite;}
body.is-focusing #spotlight-focus{opacity:1}
body.is-focusing #spotlight{opacity:.72}
#dust{position:fixed; inset:0; z-index:43; pointer-events:none; mix-blend-mode:screen; opacity:.6; transform-origin:center; transform:scale(1.04)}
#beam{position:fixed; inset:0; pointer-events:none; z-index:40; mix-blend-mode:screen; opacity:.5;
  background:radial-gradient(40% 80% at 50% -8%, rgba(255,224,170,.16), rgba(255,210,150,0) 60%);
  animation:flicker 9s ease-in-out infinite, drift 30s ease-in-out infinite;}
#stage{display:inline-block; vertical-align:top}
/* bottom-LEFT: the cassette player (cassette.css) owns the bottom-right corner */
#buzz{position:fixed; left:14px; bottom:12px; z-index:80; padding:6px 11px; border-radius:14px; cursor:pointer;
  font:11px var(--font-type); letter-spacing:.04em; color:#caa46a; background:#1a140ccc; border:1px solid #3a2c18; transition:color .2s,background .2s,box-shadow .2s}
#buzz:hover{color:#f0d8a8; background:#241a0e}
#buzz.on{color:#ffe6b0; box-shadow:0 0 12px rgba(255,210,140,.35)}
@media (prefers-reduced-motion:reduce){ #spotlight,#spotlight-focus{animation:flicker 7s ease-in-out infinite} }
#totop{position:fixed; left:14px; bottom:54px; z-index:82; width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font:18px/1 var(--font-head); color:#e9d3a0; background:#1a140cdd; border:1px solid #3a2c18;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .25s, transform .25s, background .2s}
#totop.show{opacity:1; transform:translateY(0); pointer-events:auto}
#totop:hover{background:#241a0e; color:#fff}
/* ===================== PHASE 7.2 (REBUILT) — JS-driven beam + reactive filterless contact shadows ===================== */
#glow,#dark{position:fixed; left:-40%; top:-40%; width:180%; height:180%; pointer-events:none; transform-origin:center center;}
#glow{z-index:40; mix-blend-mode:screen; opacity:.92; will-change:transform,opacity;
  background:radial-gradient(ellipse 17% 20% at 50% 50%, rgba(255,236,192,.44) 0%, rgba(255,218,158,.17) 46%, rgba(255,200,140,0) 74%);}
#dark{z-index:41; will-change:transform;
  background:radial-gradient(ellipse 20% 24% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.52) 89%, rgba(0,0,0,.70) 100%);}
.cshadow{position:absolute; z-index:1; pointer-events:none; border-radius:50%; opacity:.4; transform:translate(-50%,-50%); will-change:transform,opacity;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.34) 44%, rgba(0,0,0,0) 72%);}
body.no-lights #glow, body.no-lights #dark, body.no-lights .cshadow{display:none}
body.no-lights #room{background:radial-gradient(120% 90% at 50% 32%, #2c2114, #15100a 72%)}
body.no-cam #room.locked{overflow-y:auto}
/* ---- 7.4 hub interactivity ---- */
.clipping.hub-clickable{cursor:pointer}
.clipping.hub-clickable:focus-visible{outline:3px solid #fff; outline-offset:5px}
.clipping.is-focused{z-index:30; box-shadow:0 2px 2px rgba(0,0,0,.34), 0 34px 64px -12px rgba(0,0,0,.82), 0 10px 24px rgba(0,0,0,.45);}
#content.focusing .tb-instructions{opacity:.12; pointer-events:none}
/* ---- 7.5 banner ---- */
.tb-banner{margin:2px auto 16px; max-width:840px; text-align:center; color:#e9d3a0; padding:4px 12px 2px;}
.tb-banner .bn-kicker{font-family:var(--font-type); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#caa46a; margin-bottom:7px}
.tb-banner .bn-text{font-family:var(--font-head); font-weight:700; text-transform:uppercase; font-size:clamp(22px,4vw,40px); line-height:.98; color:#f3e2c0; text-shadow:0 2px 12px rgba(0,0,0,.65)}
/* ---- 7.5 on-cork instructions (pinned note) ---- */
.tb-instructions{position:fixed; top:14px; left:14px; z-index:60; max-width:208px; padding:11px 13px 10px; color:#2c2614; transform:rotate(-1.6deg);
  background:#f3ead2; background-image:linear-gradient(150deg, rgba(255,255,255,.4), rgba(0,0,0,.05) 80%);
  box-shadow:0 1px 1px rgba(0,0,0,.3), 0 14px 26px -10px rgba(0,0,0,.55); transition:opacity .4s ease;}
body.is-focusing .tb-instructions{opacity:.16; pointer-events:none}
.tb-instructions::before{content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(2deg); width:56px; height:18px; opacity:.8;
  background:linear-gradient(160deg, rgba(255,255,255,.5), rgba(220,216,198,.4)); box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tb-instructions .ins-title{font-family:var(--font-marker); font-size:15px; color:#7a2620; margin-bottom:6px}
.tb-instructions .ins-line{font-family:var(--font-hand); font-size:14.5px; line-height:1.24; margin-bottom:4px; color:#3a3220}
/* narrow / mobile: the on-cork instructions sticky overlaps the tight board + docked
   player, so drop it (the crawlable copy still lives in the SSR fallback + the hub). */
@media (max-width:600px){ .tb-instructions{display:none !important;} }