/* Ornate wood-frame panel — shared in-stage chrome (docs/frontend-design-patterns.md — Panel chrome).
 *
 * Opt in on feature markup: class="… ornate-panel" (+ optional ornate-panel--emphasis).
 * Mount ``OrnatePanelCorners`` (or equivalent corner nodes) as direct children.
 */

:root {
  --ornate-panel-wood-deep: rgb(22 16 10);
  --ornate-panel-wood-mid: rgb(48 38 26);
  --ornate-panel-wood-ridge: rgb(78 64 44);
  --ornate-panel-wood-edge: rgb(112 94 66 / 0.78);
  --ornate-panel-emphasis-rim: rgb(120 94 58 / 0.35);
  --ornate-panel-emphasis-glow: rgb(90 70 40 / 0.18);
}

.town-field.game-stage {
  --ornate-panel-border: calc(var(--gs-u-h) * 0.78);
  --ornate-panel-corner: calc(var(--gs-u-h) * 2.65);
}

.ornate-panel {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: calc(var(--gs-radius-sm) * 0.55);
  /* border: var(--ornate-panel-border) solid var(--ornate-panel-wood-mid); */
  box-shadow:
    0 0 0 calc(var(--gs-u-h) * 0.1) var(--ornate-panel-wood-deep),
    inset 0 0 0 calc(var(--gs-u-h) * 0.16) var(--ornate-panel-wood-ridge),
    inset 0 0 0 calc(var(--gs-u-h) * 0.34) rgb(16 12 8 / 0.88),
    0 calc(var(--gs-u-h) * 0.55) calc(var(--gs-u-h) * 1.6) rgb(0 0 0 / 0.45);
  background:
    linear-gradient(165deg, rgb(28 22 16 / 0.88), rgb(10 8 6 / 0.94)),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(58 46 30 / 0.2), transparent 70%);
  }

.ornate-panel::before {
  content: "";
  position: absolute;
  inset: calc(var(--ornate-panel-border) * 0.55);
  z-index: 0;
  pointer-events: none;
  border: calc(var(--gs-hairline) * 1.2) solid var(--ornate-panel-wood-edge);
  border-radius: calc(var(--gs-radius-sm) * 0.35);
  box-shadow: inset 0 0 calc(var(--gs-u-h) * 0.45) rgb(0 0 0 / 0.35);
}

/* Content above the inner frame; corners sit on top of the braid. */
.ornate-panel > *:not(.ornate-panel__corner) {
  position: relative;
  z-index: 1;
}

.ornate-panel--emphasis {
  box-shadow:
    0 0 0 calc(var(--gs-u-h) * 0.1) var(--ornate-panel-wood-deep),
    inset 0 0 0 calc(var(--gs-u-h) * 0.16) var(--ornate-panel-wood-ridge),
    inset 0 0 0 calc(var(--gs-u-h) * 0.34) rgb(16 12 8 / 0.88),
    0 0 0 calc(var(--gs-u-h) * 0.2) var(--ornate-panel-emphasis-rim),
    0 0 calc(var(--gs-u-h) * 1.2) var(--ornate-panel-emphasis-glow),
    0 calc(var(--gs-u-h) * 0.55) calc(var(--gs-u-h) * 1.6) rgb(0 0 0 / 0.45);
}

.ornate-panel__corner {
  position: absolute;
  z-index: 3;
  width: var(--ornate-panel-corner);
  height: var(--ornate-panel-corner);
  pointer-events: none;
  line-height: 0;
}

.ornate-panel__corner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Source art is top-left; rotate CW for the other corners. */
  transform-origin: center center;
  filter: drop-shadow(0 calc(var(--gs-u-h) * 0.1) calc(var(--gs-u-h) * 0.22) rgb(0 0 0 / 0.65));
}

.ornate-panel__corner--tl {
  top: calc(var(--ornate-panel-border) * -0.55);
  left: calc(var(--ornate-panel-border) * -0.55);
}

.ornate-panel__corner--tr {
  top: calc(var(--ornate-panel-border) * -0.55);
  right: calc(var(--ornate-panel-border) * -0.55);
}

.ornate-panel__corner--tr .ornate-panel__corner-img {
  transform: rotate(90deg);
}

.ornate-panel__corner--br {
  bottom: calc(var(--ornate-panel-border) * -0.55);
  right: calc(var(--ornate-panel-border) * -0.55);
}

.ornate-panel__corner--br .ornate-panel__corner-img {
  transform: rotate(180deg);
}

.ornate-panel__corner--bl {
  bottom: calc(var(--ornate-panel-border) * -0.55);
  left: calc(var(--ornate-panel-border) * -0.55);
}

.ornate-panel__corner--bl .ornate-panel__corner-img {
  transform: rotate(270deg);
}