/* /puzzlebox/frame.css */

:root{
  --pb-gap: 6px;
  --pb-pad: 12px;
  --pb-S: 28px; /* computed in JS */

  /* wood / ember / charcoal */
  --wood-0: #0b0605;
  --wood-1: #120907;
  --wood-2: #1a0d09;
  --wood-3: #24110b;
  --wood-hi: rgba(255, 170, 110, 0.06);
  --ember: rgba(255, 110, 35, 0.14);

  --char-0: #050505;
  --char-1: #0c0c0d;
  --char-2: #141516;

  --ink: rgba(235,240,255,0.78);
}

/* ====== IMPORTANT: neutralize your global stage-centering CSS ====== */
body.pb{
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;

  /* kill the global flex centering from /styles/style.css */
  display: block !important;
  justify-content: unset !important;
  align-items: unset !important;

  background:
    radial-gradient(1200px 800px at 50% 20%, rgba(255,140,70,0.10), transparent 60%),
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 2px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 18px
    ),
    linear-gradient(180deg, var(--wood-3), var(--wood-0));
}

/* Portrait hostility */
#pb-rotate-gate{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
#pb-rotate-gate .pb-gate-box{
  max-width: 520px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 18px 16px;
}
#pb-rotate-gate .pb-gate-title{
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
#pb-rotate-gate .pb-gate-sub{ opacity: .8; }

@media (orientation: portrait){
  #pb-rotate-gate{ display: flex; }
}

/* === 24×12 device === */
#pb-root{
  width: 100dvw;
  height: 100dvh;

  display: grid;

  /* tracks include the gap spacing */
  grid-template-columns: repeat(24, calc(var(--pb-S) + var(--pb-gap)));
  grid-template-rows: repeat(12, calc(var(--pb-S) + var(--pb-gap)));

  /* don't double-charge gap */
  gap: 0;

  padding: var(--pb-pad);
  place-content: center;
  position: relative;

  filter: drop-shadow(0 30px 90px rgba(0,0,0,0.62));
}


/* Regions */
.pb-left  { grid-column: 1 / 4;   grid-row: 1 / 13; z-index: 3; }
.pb-right { grid-column: 22 / 25; grid-row: 1 / 13; z-index: 3; }
.pb-top   { grid-column: 4 / 22;  grid-row: 1 / 5;  z-index: 3; }

.pb-region{
  display: grid;
  gap: var(--pb-gap);

  /* THIS is the breathing room you want */
  padding: calc(var(--pb-gap) * 1);   /* try 1x gap first (6px) */
  box-sizing: border-box;

  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;

  align-content: start;
  justify-content: start;

  background:
    radial-gradient(700px 260px at 50% 0%, var(--ember), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.62)),
    linear-gradient(180deg, var(--wood-2), var(--wood-0));

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,0.18),  /* keep this thinner */
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -18px 30px rgba(0,0,0,0.60),
    inset 0 0 0 1px rgba(0,0,0,0.45);
}


/* Subgrids */
#pb-left, #pb-right{
  grid-template-columns: repeat(3, var(--pb-S));
  grid-template-rows: repeat(12, var(--pb-S));
}
#pb-top{
  grid-template-columns: repeat(18, var(--pb-S));
  grid-template-rows: repeat(4, var(--pb-S));
}

/* ===== SOCKETS: WOOD FACE + CHARRED RIM ===== */
.pb-socket{
  width: var(--pb-S);
  height: var(--pb-S);
  border-radius: 9px;
  position: relative;
  user-select: none;

  /* burned rim */
  background:
    radial-gradient(16px 14px at 30% 22%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, var(--char-2), var(--char-0));

  border: 1px solid rgba(255,255,255,0.11);

  box-shadow:
    0 10px 14px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -10px 16px rgba(0,0,0,0.74);
}

/* inner wood “plug” */
.pb-socket::before{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: 7px;

  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      rgba(0,0,0,0) 8px,
      rgba(0,0,0,0) 16px
    ),
    radial-gradient(40px 28px at 30% 30%, var(--wood-hi), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42)),
    linear-gradient(180deg, var(--wood-3), var(--wood-1));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -10px 16px rgba(0,0,0,0.55);

  pointer-events:none;
}

/* charred edge line */
.pb-socket::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.50);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  pointer-events:none;
}

/* Glyphs */
.pb-socket .base{
  position: relative;
  z-index: 2;
  font: 800 clamp(11px, calc(var(--pb-S) * 0.38), 16px) / 1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0,0,0,0.75);
}

/* overlay: ember reveal */
.pb-socket .overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  z-index:3;
  pointer-events:none;

  font: 900 clamp(12px, calc(var(--pb-S) * 0.46), 18px) / 1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(255,240,220,0.95);
  text-shadow:
    0 0 10px rgba(255,106,26,0.30),
    0 0 22px rgba(255,106,26,0.18);
}
.pb-socket.has-overlay .overlay{ opacity: 1; }

/* === Content cavity === */
#pb-content{
  grid-column: 4 / 22;
  grid-row: 5 / 13;

  z-index: 1;
  pointer-events: auto;

  border-radius: 18px;
  overflow: hidden;
  position: relative;

  background:
    radial-gradient(900px 420px at 50% 20%, rgba(255,110,35,0.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.72)),
    linear-gradient(180deg, #0c0d10, #060607);

  border: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -22px 40px rgba(0,0,0,0.68),
    inset 0 0 0 1px rgba(0,0,0,0.55);
}

/* IMPORTANT: override your global #container/canvas sizing rules inside pb-content */
#pb-content #container{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 500px !important;
  height: 600px !important;
  overflow: visible !important;
  transform-origin: 50% 50% !important; /* scale around center */
  will-change: transform;
}

#pb-content canvas{
  position: absolute !important;
  inset: 0 !important;
  width: 500px !important;
  height: 600px !important;
  touch-action: none;
}