/* ============================================================================
   play-frame.css — the carved "game frame" PRIMITIVE
   (docs/design/profile-game-feel-v2.md §3, Phase 1).

   ONE reusable framed-surface class that reads as carved console furniture instead
   of a rounded-rect web card: a double-stroke rim, paired light(top)/dark(bottom)
   inset emboss, and four corner studs (a single aria-invisible pseudo-element, so
   they never eat the >=44px hit area). Phases 2-3 retrofit the ~30 ad-hoc char-*
   borders onto this and delete the remedial contrast-patch block.

   Loaded AFTER play.css (so equal-specificity room overrides still win) and scoped
   to body.play-app — mirrors play-polish.css. Static, so no reduced-motion gate.

   Variants:  size  .tpq-frame--sm | (md, default) | --lg
              hue   .tpq-frame--gold (default) | --arcane | --park
   ============================================================================ */

body.play-app .tpq-frame {
	--tpqf-radius: 14px;
	--tpqf-rim: rgba(201, 162, 77, 0.55);
	--tpqf-bg: linear-gradient(180deg, rgba(26, 21, 14, 0.86), rgba(13, 11, 8, 0.92));
	--tpqf-stud: rgba(255, 228, 150, 0.85);
	position: relative;
	border: 1px solid var(--tpqf-rim);
	border-radius: var(--tpqf-radius);
	background: var(--tpqf-bg);
	/* Emboss: top/left catch the light, bottom/right fall to shadow → a carved bezel,
	   not a flat 1px outline. Plus a soft drop for "lifted furniture". */
	box-shadow:
		inset 0 1px 0 rgba(255, 226, 130, 0.2),
		inset 1px 0 0 rgba(255, 226, 130, 0.07),
		inset 0 -1px 0 rgba(0, 0, 0, 0.55),
		inset -1px 0 0 rgba(0, 0, 0, 0.4),
		0 10px 30px -14px rgba(0, 0, 0, 0.8);
}

/* Four corner studs from ONE pseudo-element (four positioned radial stops). It is
   inset + pointer-events:none + decorative, so it never intercepts taps or focus. */
body.play-app .tpq-frame::before {
	content: "";
	position: absolute;
	inset: 5px;
	pointer-events: none;
	border-radius: inherit;
	background:
		radial-gradient(circle 2.4px at 0 0, var(--tpqf-stud), transparent 70%),
		radial-gradient(circle 2.4px at 100% 0, var(--tpqf-stud), transparent 70%),
		radial-gradient(circle 2.4px at 0 100%, var(--tpqf-stud), transparent 70%),
		radial-gradient(circle 2.4px at 100% 100%, var(--tpqf-stud), transparent 70%);
	background-repeat: no-repeat;
	opacity: 0.8;
}

/* Size variants — only the corner radius changes; padding stays on the host. */
body.play-app .tpq-frame--sm { --tpqf-radius: 10px; }
body.play-app .tpq-frame--lg { --tpqf-radius: 18px; }

/* Hue variants — the rim + fill take a tint so a tab's chrome reads as its own
   chamber (gold default; arcane = skill-tree indigo; park = sky-deck blue). */
body.play-app .tpq-frame--arcane {
	--tpqf-rim: rgba(150, 132, 240, 0.55);
	--tpqf-bg: linear-gradient(180deg, rgba(24, 20, 44, 0.86), rgba(12, 10, 24, 0.92));
	--tpqf-stud: rgba(190, 178, 255, 0.85);
}
body.play-app .tpq-frame--park {
	--tpqf-rim: rgba(120, 170, 220, 0.5);
	--tpqf-bg: linear-gradient(180deg, rgba(16, 26, 40, 0.86), rgba(9, 14, 24, 0.92));
	--tpqf-stud: rgba(190, 220, 255, 0.85);
}