/* ===== Window frames, styled after each game's textbox look. =====
 * These are the CSS-recreation frames (thin, ~half the previous thickness).
 * Games with an authentic windowskin (GSC, RSE, FRLG, DP, Pt, HGSS) use
 * border-image instead — see server/frames.js — and are NOT styled here.
 *
 * Each frame sets:
 *   --frame-thickness : interior inset (matches the visible ring width so the
 *                       transparent .interior hole lines up with the frame)
 *   border + inset box-shadow rings that ONLY paint the edge; the center is
 *   never filled, so the interior stays a true alpha hole for OBS.
 */

.window { --frame-thickness: 7px; border-radius: 8px; }

/* --- Gen 1: Game Boy (Red/Blue/Yellow) — crisp black double line on pale bg */
.frame-gen1-gb {
  --frame-thickness: 7px;
  border: 2px solid #0f0f0f;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px #f8f8e8,
    inset 0 0 0 3px #0f0f0f,
    0 0 0 2px #f8f8e8;
}

/* --- Gen 3: Ruby/Sapphire/Emerald — rectangular teal double line */
.frame-gen3-rse {
  --frame-thickness: 7px;
  border: 2px solid #0f4e6e;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px #c6ecf7,
    inset 0 0 0 3px #4aa6cc,
    0 0 0 1px #082c40;
}

/* --- Gen 3: FireRed/LeafGreen — rectangular blue double line */
.frame-gen3-frlg {
  --frame-thickness: 7px;
  border: 2px solid #2a4a86;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px #eef4ff,
    inset 0 0 0 3px #6f9bd8,
    0 0 0 1px #16264a;
}

/* --- Gen 5: B/W — clean dark rounded frame with cyan accent */
.frame-gen5-bw {
  --frame-thickness: 7px;
  border: 2px solid #101418;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px #f4f4f4,
    inset 0 0 0 3px #38b8c8,
    0 0 0 1px #060809;
}

/* --- Gen 6: X/Y & ORAS — rounded white frame with blue edge */
.frame-gen6-xy {
  --frame-thickness: 7px;
  border: 2px solid #3868a8;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px #f8f8f8,
    inset 0 0 0 3px #90b8e0,
    0 0 0 1px #1c3860;
}

/* --- Gen 7: S/M — tropical white/teal rounded frame */
.frame-gen7-sm {
  --frame-thickness: 7px;
  border: 2px solid #18a090;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 2px #ffffff,
    inset 0 0 0 3px #78d8c8,
    0 0 0 1px #0c5048;
}

/* --- Gen 7: Let's Go — playful yellow/brown */
.frame-gen7-lgpe {
  --frame-thickness: 7px;
  border: 2px solid #a87818;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 2px #fff8e0,
    inset 0 0 0 3px #f8c840,
    0 0 0 1px #584008;
}

/* --- Gen 8: SwSh — flat white card with red accent */
.frame-gen8-swsh {
  --frame-thickness: 7px;
  border: 2px solid #202428;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px #ffffff,
    inset 0 0 0 3px #e83848,
    0 0 0 1px #101214;
}

/* --- Gen 8: BDSP — light blue rounded */
.frame-gen8-bdsp {
  --frame-thickness: 7px;
  border: 2px solid #4878b0;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px #f0f6ff,
    inset 0 0 0 3px #88b0e0,
    0 0 0 1px #223344;
}

/* --- Gen 8: PLA — parchment/ink sumi-e look */
.frame-gen8-pla {
  --frame-thickness: 7px;
  border: 2px solid #4a3828;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #f0e4cc,
    inset 0 0 0 3px #907050,
    0 0 0 1px #2a2018;
}

/* --- Gen 9: SV — modern rounded, orange/violet gradient edge.
 * Gradient border with a TRANSPARENT interior via mask-composite (the
 * padding box is masked out so only the border ring paints — OBS-safe). */
.frame-gen9-sv {
  --frame-thickness: 8px;
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #f07830, #e84d8a 55%, #a048c0) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* --- custom uploaded 9-slice frames --- */
.frame-custom { --frame-thickness: 10px; border-radius: 0; }