/*
 * Magic16 — effects: handcrafted materials (tiled textures), LBP craft accents
 * (stitched seams / sticker cut-outs / felt), neon glow, retro gifs, and the
 * starry-night canvas layer. Materials are the "handcrafted LittleBigPlanet" skin.
 */

/* ---- The starry-night background: a tiled animated gif that parallaxes with
 * the cursor (starfield.js drives background-position), with the colourful
 * canvas starfield painted on top. ---- */
.stars-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: #000 var(--tex-starfield) repeat; background-position: 0 0;
  image-rendering: auto; will-change: background-position; }
.starcanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1;
  pointer-events: none; display: block; image-rendering: auto; }

/* ---- Tiled material textures (geocities backgrounds). Render SMOOTH — these
 * are photographic tiles; only genuine pixel-art (retro gifs, the moon) gets
 * image-rendering:pixelated. ---- */
.tex--chess   { background: var(--tex-chess) repeat; }
.tex--water   { background: var(--tex-water) repeat; }
.tex--white   { background: var(--tex-whitetile) repeat; }
.tex--books   { background: var(--tex-books) repeat; }
.tex--leaf    { background: #000 var(--tex-leaf) repeat; }
.tex--brick   { background: var(--tex-brick) repeat; }
.tex--circuit { background: #041a06 var(--tex-circuit) repeat; }
.tex--felt    { background: var(--tex-felt) repeat; }
.tex--marble  { background: var(--tex-marble) repeat; }

/* A textured "board" a section sits on: tile + inset frame, content floats above */
.board {
  padding: clamp(12px, 1.6vw, 20px);
  border: 2px solid; border-color: var(--dkshadow) var(--hilite) var(--hilite) var(--dkshadow);
  box-shadow: inset 1px 1px 0 var(--shadow);
}
/* Keep body copy readable on a busy tile: content blocks get a solid panel */
.board > .card, .board > .panel { background: var(--well); }

/* ---- LBP craft: sticker cut-out (thick white edge + drop shadow + tilt) ---- */
.sticker { box-shadow: 0 0 0 4px #fff, 3px 4px 8px rgba(0,0,0,0.45) !important; }
.sticker--tilt { transform: rotate(-0.6deg); }

/* ---- LBP stitched seam (an alternative to the etched groove) ---- */
.lbp-stitch { height: 0; border: none; margin: var(--pad-6) 0;
  border-top: 3px dashed var(--mag-dk); filter: drop-shadow(0 1.5px 0 rgba(255,255,255,0.5)); }

/* ---- Felt patch ---- */
.felt-patch { background: var(--tex-felt) repeat; padding: 10px;
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite);
  box-shadow: inset 1px 1px 0 var(--light); }

/* ---- Neon glow helpers ---- */
.glow-cyan { box-shadow: var(--glow-cyan); }
.glow-mag { box-shadow: var(--glow-mag); }
.neon-text { color: var(--cyan-hot); text-shadow: 0 0 6px var(--cyan), 0 0 2px var(--cyan-hot); }
.neon-text--mag { color: var(--mag-hot); text-shadow: 0 0 6px var(--mag), 0 0 2px var(--mag-hot); }

/* ---- Retro gif blinkies stay crisp ---- */
.retro-gif { image-rendering: pixelated; vertical-align: middle; }

/* ---- Marquee (a very 90s touch), reduced-motion safe ---- */
.marquee { overflow: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .marquee > span { display: inline-block; padding-left: 100%; animation: m16-marquee 18s linear infinite; }
  @keyframes m16-marquee { to { transform: translateX(-100%); } }
}

.app--paused .starcanvas { /* canvas pauses itself via visibilitychange */ }

/* The legacy CSS `fx-*` effect catalog (windows93-grade blink/pulse/glitch/CRT/…)
 * was REMOVED in the WebGPU migration. Element effects are now a real, ordered
 * WebGPU stack declared on the element (data-m16-fx) and rendered by src/gpu/*.
 * Text glow/outline still live in the text `effect` style (TEXT_EFFECTS). */

/* =========================================================================
 * Insert palette blocks (.m16-ins-*) — self-contained styling so a dropped
 * block looks intentional immediately, then flows through the edit pipeline.
 * ========================================================================= */
.m16-ins-box { min-height: 60px; padding: 12px; margin: 10px 0; background: var(--well);
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite);
  box-shadow: inset 1px 1px 0 var(--light); }
.m16-ins-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.m16-ins-cols > * { padding: 10px; background: var(--well);
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite); }
.m16-ins-btn { display: inline-block; padding: 4px 14px; font: 700 14px var(--font-ui); cursor: pointer;
  background: var(--face); color: var(--ink); border: 2px solid;
  border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite); box-shadow: inset 1px 1px 0 var(--light); }
.m16-ins-btn:active { border-color: var(--dkshadow) var(--hilite) var(--hilite) var(--dkshadow); }
.m16-ins-88 { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 31px;
  font: 700 10px var(--font-ui); text-decoration: none; color: #fff; text-align: center;
  background: linear-gradient(90deg, var(--mag), var(--cyan)); border: 1px solid #000; box-shadow: 1px 1px 0 #000; }
.m16-ins-blinkie { display: inline-block; padding: 3px 10px; font: 700 11px var(--font-ui); color: #fff;
  background: #000; border: 1px solid var(--cyan-hot); text-shadow: 0 0 4px var(--cyan-hot); }
.m16-ins-uc { display: inline-block; padding: 6px 14px; font: 700 13px var(--font-ui); color: #000;
  background: repeating-linear-gradient(45deg, #ffd400 0 12px, #000 12px 24px); border: 2px solid #000;
  -webkit-text-stroke: 0.4px #fff; }
.m16-ins-ring { display: inline-flex; gap: 10px; align-items: center; padding: 4px 10px; font: 700 12px var(--font-ui);
  background: var(--face); border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite); }
.m16-ins-ring a { text-decoration: none; color: var(--link); }
.m16-ins-embed { width: 100%; min-height: 160px; border: 2px solid; border-color: var(--dkshadow) var(--hilite) var(--hilite) var(--dkshadow); background: #fff; }
.m16-ins-img { display: block; max-width: 100%; }

/* =========================================================================
 * Interactive widgets (wired by behaviors.js). Self-contained Win98/neon look.
 * ========================================================================= */
.m16-tabs, .m16-gallery, .m16-carousel, .m16-accordion { margin: 10px 0; }
.m16-tabs__bar { display: flex; gap: 2px; }
.m16-tab { padding: 4px 12px; font: 700 13px var(--font-ui); cursor: pointer; background: var(--face-dk); color: var(--ink);
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--face-dk) var(--hilite); }
.m16-tab.is-active { background: var(--well); border-bottom-color: var(--well); }
.m16-tab-panel { padding: 12px; background: var(--well); border: 2px solid;
  border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite); }

.m16-gallery__view { min-height: 90px; padding: 14px; margin-bottom: 8px; background: #0b0c12; color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center; border: 2px solid;
  border-color: var(--dkshadow) var(--hilite) var(--hilite) var(--dkshadow); }
.m16-gallery__view b { font-size: 22px; color: var(--cyan-hot); display: block; }
.m16-gallery__strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px; }
.m16-gallery__item { flex: 0 0 auto; min-width: 76px; padding: 8px; cursor: pointer; background: var(--face); color: var(--ink);
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite); display: flex; flex-direction: column; gap: 2px; }
.m16-gallery__item b { display: block; }
.m16-gallery__item span { font-size: 11px; color: var(--ink-soft); }
.m16-gallery__item.is-active { outline: 3px solid var(--cyan-hot); outline-offset: 1px; }

.m16-carousel { padding: 10px; background: var(--well); border: 2px solid; border-color: var(--dkshadow) var(--hilite) var(--hilite) var(--dkshadow); }
.m16-carousel__slide { min-height: 80px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.m16-carousel__nav { display: flex; justify-content: space-between; margin-top: 8px; }
.m16-carousel__nav button { padding: 3px 12px; cursor: pointer; background: var(--face);
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite); }

.m16-acc__head { display: block; width: 100%; text-align: left; padding: 8px 12px; cursor: pointer; font: 700 13px var(--font-ui);
  background: var(--face); color: var(--ink); border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite); margin-top: 3px; }
.m16-acc__head::before { content: "▸ "; }
.m16-acc__head.is-open::before { content: "▾ "; }
.m16-acc__body { padding: 10px 14px; background: var(--well); border: 2px solid; border-top: 0; border-color: var(--shadow); }

/* ---- Decorations layer (Magic16 Maker stickers) ------------------------- */
.deco-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.deco-box { position: relative; width: min(1040px, 100%); height: 100%; margin: 0 auto; }
.deco { will-change: transform; }
.deco--img { display: block; image-rendering: auto; max-width: none; }
.deco--link { display: inline-block; }