/* 12 · Go area options — overlay style matched to the lesson's HANE / NOBI / KNEE KICK callouts */
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:block}
html,body{margin:0;height:100%;background:#1a120c;overflow:hidden}
body[data-bg="green"]{background:#00B140}
body[data-bg="transparent"],html:has(body[data-bg="transparent"]){background:transparent}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#1a120c url(frame.jpg) 0 0/1920px 1080px no-repeat}
#stage[data-bg="green"]{background:#00B140}
#stage[data-bg="blue"]{background:#0047BB}
#stage[data-bg="transparent"]{background:transparent}
#fx,#svgTop{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible}
#fx svg{position:absolute;left:0;top:0;width:1920px;height:1080px}
/* the hand matte: everything on the board sits UNDER TiTi's fingers */
#fx.matte{-webkit-mask-image:url(handmask.png);mask-image:url(handmask.png);-webkit-mask-size:1920px 1080px;mask-size:1920px 1080px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#label{position:absolute;left:0;top:0;white-space:pre;font:800 59px/1 "Montserrat",sans-serif;color:#fff;--g:1;--gb:0}
#label .ch{display:inline-block;position:relative;isolation:isolate;will-change:transform,opacity,filter}
#label .ch::before{content:attr(data-c);position:absolute;left:0;top:0;z-index:-1;color:#fff;opacity:var(--g);
  text-shadow:-1.2px -.9px 0 rgba(255,96,110,.55),1.1px .9px 0 rgba(110,225,255,.45),0 0 3px rgba(255,255,255,.55),0 0 10px rgba(255,255,255,.42),0 0 24px rgba(255,255,255,.36),0 0 52px rgba(255,255,255,.24)}
#label .ch::after{content:attr(data-c);position:absolute;left:0;top:0;z-index:-2;color:transparent;opacity:var(--gb);text-shadow:0 0 18px #fff,0 0 36px rgba(255,255,255,.7)}
#label .ch .f{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(circle at 1.5px 1.5px,rgba(214,214,214,1) 0 .75px,rgba(255,255,255,1) 1.05px);background-size:3px 3px;background-color:#fff}
#hud{position:fixed;z-index:10;left:12px;top:10px;display:flex;gap:14px;align-items:center;font:600 13px/1 system-ui,Arial,sans-serif;color:#fff;background:rgba(17,17,17,.82);padding:8px 12px;border-radius:6px;opacity:0;transition:opacity .25s}
#hud.on{opacity:1}
#hud a{color:#F0D20C}
#hud .hint{opacity:.75}

/* ---------- comparison page (no ?opt) ---------- */
body.gallery{overflow:auto;height:auto;background:#17110c;color:#efe6da;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
html.gallery{overflow:auto;height:auto}
html.gallery body.gallery{overflow:visible}
.gallery header{max-width:1500px;margin:0 auto;padding:28px 28px 8px}
.gallery header a{color:#F0D20C;text-decoration:none;font-size:14px}
.gallery h1{font:800 34px/1.1 "Montserrat",sans-serif;margin:14px 0 6px;letter-spacing:.01em}
.gallery header p{margin:0;max-width:62em;color:#c9bba8}
.gallery .bar{display:flex;gap:10px;align-items:center;margin:16px 0 0;flex-wrap:wrap}
.gallery button,.gallery .btn{font:600 14px/1 system-ui,Arial,sans-serif;background:#2a2019;color:#efe6da;border:1px solid #4a3a2c;border-radius:6px;padding:9px 13px;cursor:pointer;text-decoration:none}
.gallery button:hover,.gallery .btn:hover{border-color:#F0D20C;color:#fff}
.gallery button[aria-pressed="true"]{background:#F0D20C;color:#17110c;border-color:#F0D20C}
.grid{max-width:1500px;margin:0 auto;padding:18px 28px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:26px}
.tile{background:#211812;border:1px solid #3a2c21;border-radius:10px;overflow:hidden}
.tile .frame{position:relative;aspect-ratio:16/9;background:#000}
.tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.tile .cap{display:flex;gap:12px;align-items:flex-start;padding:14px 16px 16px}
.tile .n{font:800 30px/1 "Montserrat",sans-serif;color:#F0D20C;min-width:28px}
.tile h2{margin:0;font-size:18px;line-height:1.2}
.tile p{margin:4px 0 10px;color:#bfae98;font-size:14px}
.tile .acts{display:flex;gap:8px;flex-wrap:wrap}
.gallery footer{max-width:1500px;margin:0 auto;padding:0 28px 40px;color:#9c8b76;font-size:14px}