/* ==========================================================================
   WINNERA FRAME SYSTEM v1
   --------------------------------------------------------------------------
   Presentation-only. Adds ornamental frame/corner/border treatment on top of
   the existing .wn-module system (08-portal.css) and .wn-module--vault
   (Skarbiec) — no markup contract changes, no new classes required to keep
   existing pages working. Loaded once, portal-wide, right after 08-portal.css
   (see index.php), so every rule below can safely redeclare the handful of
   .wn-module/.wn-module--framed properties it enriches: later stylesheet,
   same specificity, wins per-property — nothing here touches layout, only
   background/border/box-shadow decoration.

   CREATIVE DIRECTION
   A world for winners: warm, heroic, noble — not gloomy dark fantasy. The
   ornament vocabulary is a restrained, non-costume reading of Slavic folk
   heritage: sun rosettes, woven/interlace border bands, carved corner
   joints, oak-leaf accents — rendered as engraved metal and carved wood,
   never as raster clip-art. Every shape below is pure CSS (gradients,
   conic-gradients, clip-path) so it inherits the portal's real gold tokens
   and never ships as an extra image request.

   THREE TIERS — hierarchy, not decoration-for-its-own-sake:

     Tier 1  .wn-module (default, no modifier)
             Utility panels: left game index, small right-rail widgets.
             Light carved corner joints only. No solar symbol.

     Tier 2  .wn-module--framed (existing class, applied unchanged across
             the site today — this tier upgrades it in place)
             Puls Świata, Moja Winnera, Status Publicznego Testu, the
             homepage story sections. Richer corners, a small engraved sun
             disc crest, a top/bottom engraved bevel.

     Tier 3  .wn-module--tier3 (new, opt-in, layered on top of --framed
             and/or --vault where a module has earned real prestige)
             Skarbiec, Sala Mistrzów, the Store's Season Treasury card.
             The full sun rosette (ring + spokes), a woven border band, an
             oak-leaf title mark, the strongest bevel. Used sparingly and
             only where the spec names it — never applied by default.

   Every colour is an existing 01-tokens.css custom property or an rgba()
   built from one. No raw hex value is introduced by this file.
   ========================================================================== */

:root {
	/* Sun rosette — an 8-spoke solar disc, the portal's one recurring solar
	   motif. Spokes are offset from the 0/360 seam (20°→340° window) so the
	   conic-gradient never has to wrap a spoke across the start angle. */
	--wn-rosette-spokes: conic-gradient(from 0deg,
		transparent 0deg 20deg,       var(--wn-gold) 20deg 25deg,
		transparent 25deg 65deg,      var(--wn-gold) 65deg 70deg,
		transparent 70deg 110deg,     var(--wn-gold) 110deg 115deg,
		transparent 115deg 155deg,    var(--wn-gold) 155deg 160deg,
		transparent 160deg 200deg,    var(--wn-gold) 200deg 205deg,
		transparent 205deg 245deg,    var(--wn-gold) 245deg 250deg,
		transparent 250deg 290deg,    var(--wn-gold) 290deg 295deg,
		transparent 295deg 335deg,    var(--wn-gold) 335deg 340deg,
		transparent 340deg 360deg);
	--wn-rosette-ring: radial-gradient(circle,
		transparent 0 56%, rgba(200, 163, 90, 0.6) 56% 60%, transparent 60%);
	--wn-rosette-ring-inner: radial-gradient(circle,
		transparent 0 30%, rgba(200, 163, 90, 0.4) 30% 33%, transparent 33%);

	/* Woven/interlace border band — a basket-weave illusion from two
	   opposed diagonal hatches, used only on Tier 3's bottom edge. */
	--wn-weave-band:
		repeating-linear-gradient(45deg,  rgba(200, 163, 90, 0.20) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(-45deg, rgba(200, 163, 90, 0.12) 0 2px, transparent 2px 7px);
}

/* ==========================================================================
   TIER 1 — STANDARD PANELS
   Every .wn-module gets this. Small, quiet, "carved joint" corner marks —
   two 1px hairlines meeting at each corner, echoing the engraved-metal
   frame the portal already stands on. No ring, no rosette, no weave.
   ========================================================================== */

.wn-module {
	/* Adds a faint bottom hairline to the existing shadow/inset-top pair,
	   so every panel — not just --framed ones — reads as bevelled on both
	   edges instead of only lit from the top. */
	box-shadow: var(--wn-shadow), var(--wn-inset-top), inset 0 -1px 0 rgba(200, 163, 90, 0.06);
}

.wn-module::after {
	content: "";
	position: absolute;
	inset: 6px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(to right,  var(--wn-border-strong) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--wn-border-strong) 0 1px, transparent 1px),
		linear-gradient(to left,   var(--wn-border-strong) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--wn-border-strong) 0 1px, transparent 1px),
		linear-gradient(to right,  var(--wn-border-strong) 0 1px, transparent 1px),
		linear-gradient(to top,    var(--wn-border-strong) 0 1px, transparent 1px),
		linear-gradient(to left,   var(--wn-border-strong) 0 1px, transparent 1px),
		linear-gradient(to top,    var(--wn-border-strong) 0 1px, transparent 1px);
	background-size:
		12px 1px, 1px 12px, 12px 1px, 1px 12px,
		12px 1px, 1px 12px, 12px 1px, 1px 12px;
	background-position:
		top left,  top left,
		top right, top right,
		bottom left,  bottom left,
		bottom right, bottom right;
	opacity: 0.85;
}

/* ==========================================================================
   TIER 2 — IMPORTANT PANELS
   .wn-module--framed, upgraded in place: every module already using it
   (Puls Świata, Moja Winnera, Status Publicznego Testu, the homepage story
   sections) gets the richer treatment automatically, no markup change.
   Richer corners, a small engraved sun disc crest above the title rule, and
   a stronger top/bottom bevel.
   ========================================================================== */

.wn-module--framed {
	box-shadow: var(--wn-shadow), var(--wn-inset-top), inset 0 -1px 0 rgba(200, 163, 90, 0.10);
}

/* The title rule's box grows tall enough to also host a small sun disc
   "crest" that sits astride the module's top edge, like a fitted medallion
   — the box was a 1px line before; only its bounding box changes, the rule
   itself (var(--wn-rule-gold)) is repainted at the same visual position. */
.wn-module--framed::before {
	content: "";
	position: absolute;
	top: -15px; left: 12%; right: 12%;
	height: 30px;
	background-repeat: no-repeat;
	background-image: var(--wn-rule-gold), var(--wn-rosette-ring);
	background-size: 100% 1px, 22px 22px;
	background-position: center center, top center;
	opacity: 0.85;
}

.wn-module--framed::after {
	content: "";
	position: absolute;
	inset: 5px;
	pointer-events: none;
	border: 1px solid transparent;
	border-image: linear-gradient(135deg,
		var(--wn-frame-edge) 0 2%, transparent 2% 98%, var(--wn-frame-edge) 98%) 1;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(to right,  var(--wn-gold-deep) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--wn-gold-deep) 0 1px, transparent 1px),
		linear-gradient(to left,   var(--wn-gold-deep) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--wn-gold-deep) 0 1px, transparent 1px),
		linear-gradient(to right,  var(--wn-gold-deep) 0 1px, transparent 1px),
		linear-gradient(to top,    var(--wn-gold-deep) 0 1px, transparent 1px),
		linear-gradient(to left,   var(--wn-gold-deep) 0 1px, transparent 1px),
		linear-gradient(to top,    var(--wn-gold-deep) 0 1px, transparent 1px);
	background-size:
		18px 1px, 1px 18px, 18px 1px, 1px 18px,
		18px 1px, 1px 18px, 18px 1px, 1px 18px;
	background-position:
		top left,  top left,
		top right, top right,
		bottom left,  bottom left,
		bottom right, bottom right;
	opacity: 0.7;
}

/* ==========================================================================
   TIER 3 — PRESTIGE PANELS
   Opt-in only: applied explicitly to Skarbiec, Sala Mistrzów and the
   Store's Season Treasury card — never applied by a base class, so nothing
   becomes prestige-tier by accident. Layers on top of --framed and, where
   present, --vault. The full sun rosette, a woven border band along the
   bottom edge, an oak-leaf title mark in place of the plain rune diamond,
   and the strongest bevel in the system.
   ========================================================================== */

.wn-module--tier3 {
	border-color: var(--wn-border-strong);
	box-shadow: var(--wn-shadow-lg), var(--wn-inset-top), inset 0 -1px 0 rgba(200, 163, 90, 0.16);
}

.wn-module--tier3::before {
	content: "";
	position: absolute;
	top: -18px; left: 10%; right: 10%;
	height: 36px;
	background-repeat: no-repeat;
	background-image: var(--wn-rule-gold), var(--wn-rosette-spokes), var(--wn-rosette-ring), var(--wn-rosette-ring-inner);
	background-size: 100% 1px, 30px 30px, 30px 30px, 30px 30px;
	background-position: center center, top center, top center, top center;
	opacity: 0.9;
}

.wn-module--tier3::after {
	content: "";
	position: absolute;
	inset: 5px;
	pointer-events: none;
	border: 1px solid transparent;
	border-image: linear-gradient(135deg,
		var(--wn-gold-deep) 0 2%, transparent 2% 96%, var(--wn-gold-deep) 96%) 1;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
	background-image:
		linear-gradient(to right,  var(--wn-gold) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--wn-gold) 0 1px, transparent 1px),
		linear-gradient(to left,   var(--wn-gold) 0 1px, transparent 1px),
		linear-gradient(to bottom, var(--wn-gold) 0 1px, transparent 1px),
		linear-gradient(to right,  var(--wn-gold) 0 1px, transparent 1px),
		linear-gradient(to top,    var(--wn-gold) 0 1px, transparent 1px),
		linear-gradient(to left,   var(--wn-gold) 0 1px, transparent 1px),
		linear-gradient(to top,    var(--wn-gold) 0 1px, transparent 1px),
		var(--wn-weave-band);
	background-size:
		24px 1px, 1px 24px, 24px 1px, 1px 24px,
		24px 1px, 1px 24px, 24px 1px, 1px 24px,
		16px 5px;
	background-position:
		top left,  top left,
		top right, top right,
		bottom left,  bottom left,
		bottom right, bottom right,
		bottom center;
	opacity: 0.85;
}

/* Oak-leaf title mark — a small lobed silhouette, replacing the plain rune
   diamond only on prestige panels, so the title row itself signals "this
   one is different" before a player reads a single word. */
.wn-module--tier3 .wn-module__head::before {
	width: 11px; height: 11px;
	border: 0;
	background: var(--wn-gold);
	transform: none;
	clip-path: polygon(
		50% 0%, 63% 14%, 58% 24%, 74% 27%, 66% 40%,
		80% 46%, 68% 56%, 76% 66%, 60% 68%,
		55% 84%, 50% 100%, 45% 84%, 40% 68%,
		24% 66%, 32% 56%, 20% 46%, 34% 40%,
		26% 27%, 42% 24%, 37% 14%
	);
}

.wn-module--tier3 .wn-module__title {
	color: var(--wn-gold-bright);
	letter-spacing: calc(var(--wn-track-label) + 0.02em);
}

/* --------------------------------------------------------------------------
   Forced colours / high contrast: every layer above is atmosphere, never
   information (identical policy to --wn-grain-opacity in 01-tokens.css) —
   drop it and keep the plain panel structure.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
	.wn-module::after,
	.wn-module--framed::before,
	.wn-module--framed::after,
	.wn-module--tier3::before,
	.wn-module--tier3::after {
		display: none;
	}

	.wn-module--tier3 .wn-module__head::before {
		background: CanvasText;
		clip-path: none;
		width: 7px;
		height: 7px;
		transform: rotate(45deg);
	}
}