/* Maps theme design tokens (set on :root by the active theme, e.g. PlayIsland theme's
   Customizer output) to platform-local names with safe fallbacks. Using distinct local
   names (prefixed p-) avoids CSS custom-property self-reference cycles. */
.pi-platform {
	--p-ink: var(--pi-ink, #172b3a);
	--p-muted: var(--pi-muted, #56707f);
	--p-green: var(--pi-primary, #08644f);
	--p-accent: var(--pi-accent, #ff8a3d);
	--p-surface: var(--pi-surface, #fff);
	--p-border: var(--pi-border, #dce6e0);
	--p-radius: var(--pi-radius, 16px);
	--p-radius-lg: var(--pi-radius-lg, 28px);
	color: var(--p-ink);
	font-family: var(--pi-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	line-height: 1.65; margin: 2rem auto; max-width: 1160px;
}
.pi-platform *, .pi-platform *::before, .pi-platform *::after { box-sizing: border-box; }
.pi-platform [hidden] { display: none !important; }
.pi-platform a { color: var(--p-green); text-underline-offset: 3px; }
.pi-platform h2, .pi-platform h3 { line-height: 1.15; color: var(--p-ink); }
.pi-platform h2 { font-size: clamp(1.7rem, 4vw, 3rem); margin: .6rem 0 1rem; letter-spacing: -.03em; }
.pi-platform h3 { font-size: 1.4rem; letter-spacing: -.02em; }
.pi-hero {
	padding: clamp(1.75rem, 5vw, 4rem); border-radius: var(--p-radius-lg);
	background: radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--p-accent) 24%, transparent), transparent 55%),
		linear-gradient(125deg, color-mix(in srgb, var(--p-green) 12%, var(--p-surface)), color-mix(in srgb, var(--p-accent) 8%, var(--p-surface)));
	border: 1px solid var(--p-border); position: relative; overflow: hidden;
}
.pi-hero h2 { max-width: 680px; font-size: clamp(2.1rem, 5vw, 4.2rem); letter-spacing: -.04em; }
.pi-hero p { max-width: 620px; font-size: 1.12rem; color: var(--p-muted); }
.pi-eyebrow, .pi-tag {
	display: inline-block; color: var(--p-green); background: color-mix(in srgb, var(--p-green) 12%, transparent);
	border-radius: 999px; padding: .3rem .75rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
}
.pi-platform .pi-button {
	display: inline-flex; align-items: center; gap: .4rem; background: var(--p-green); color: #fff;
	border: 2px solid transparent; border-radius: calc(var(--p-radius) * .6); padding: .85rem 1.4rem;
	font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; min-height: 48px;
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--p-green) 60%, transparent);
}
.pi-platform .pi-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pi-platform .pi-button.pi-secondary {
	background: color-mix(in srgb, var(--p-green) 10%, var(--p-surface)); color: var(--p-green);
	border-color: var(--p-border); box-shadow: none;
}
.pi-platform button:disabled { opacity: .6; cursor: default; transform: none; }
.pi-platform :focus-visible { outline: 3px solid var(--p-accent); outline-offset: 3px; }
.pi-intro { margin: 2.75rem 0 1.5rem; }
.pi-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.4rem; }
.pi-card {
	padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--p-border); border-radius: var(--p-radius-lg);
	background: var(--p-surface); box-shadow: 0 10px 30px -16px rgba(9, 40, 30, .28);
	transition: transform .18s ease, box-shadow .18s ease;
}
.pi-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(9, 40, 30, .32); }
.pi-catalog .pi-card { max-width: 600px; display: flex; flex-direction: column; gap: .5rem; }
.pi-note { color: var(--p-muted); font-size: .9rem; margin-top: 1.5rem; }
.pi-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(100%, 340px); margin: 1.75rem auto; }
.pi-light {
	aspect-ratio: 1; min-height: 60px; background: color-mix(in srgb, var(--p-ink) 6%, var(--p-surface));
	border: 2px solid var(--p-border); border-radius: calc(var(--p-radius) * .8); font: 700 1rem inherit;
	color: var(--p-ink); cursor: pointer;
}
.pi-light.is-on {
	background: linear-gradient(135deg, var(--p-accent), #ffd166); color: #3f3100; border-color: #987400;
	box-shadow: 0 0 18px color-mix(in srgb, var(--p-accent) 55%, transparent);
}
.pi-platform .pi-light:disabled { opacity: 1; }
.pi-stats { font-weight: 750; font-size: 1.15rem; }
.pi-platform progress { width: min(100%, 440px); height: 16px; accent-color: var(--p-green); border-radius: 999px; }
.pi-game-frame { display: block; width: 100%; height: clamp(360px, 70vh, 760px); border: 0; margin-top: 1.5rem; background: color-mix(in srgb, var(--p-ink) 6%, var(--p-surface)); border-radius: var(--p-radius); }
@media (prefers-reduced-motion: no-preference) {
	.pi-button, .pi-light, .pi-card { transition: background .15s ease, transform .18s ease, box-shadow .18s ease; }
}

.pi-promotion-popup{position:fixed;inset:0;margin:auto;width:min(520px,90vw);max-height:85vh;overflow:auto;padding:28px;border:1px solid #a55af8;border-radius:24px;background:#211036;color:#fff;box-shadow:0 24px 100px #0009}.pi-promotion-popup::backdrop{background:#08031dc9;backdrop-filter:blur(5px)}.pi-promotion-popup img{width:100%;max-height:240px;object-fit:cover;border-radius:16px}.pi-promotion-popup [data-popup-close]{position:absolute;right:12px;top:12px;background:#211036;color:white;border-radius:50%;width:40px;height:40px;font-size:24px}.pi-custom-menu{list-style:none;margin:0;padding:0}.pi-custom-menu .sub-menu{list-style:none;padding-left:16px}.pi-custom-menu .current-menu-item>a{background:#9f32ed;color:white}.pi-category-switch .pi-custom-menu{display:flex;flex-wrap:wrap;gap:8px}
.pi-social form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.pi-social input{display:block;max-width:100%;padding:12px;border-radius:10px}.pi-friend-card{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px;background:#9355c51a;border:1px solid #b584cb44;border-radius:16px;margin:12px 0}.pi-friend-card strong{flex:1;min-width:150px}.pi-social button{border-radius:10px;padding:10px 14px;background:#7f39b9;color:white;border:1px solid #c191e0;cursor:pointer}.pi-social button:disabled{opacity:.5;cursor:default}.pi-match-card{padding:20px;margin:16px 0;border:1px solid #b584cb55;border-radius:20px;background:#9553c514}.pi-social-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(300px,100%);margin:16px 0}.pi-social-board button{aspect-ratio:1;font-size:30px;background:#26123e}.pi-social-board button.is-lit{background:#f9d66c;color:#432760;opacity:1}.pi-social button:focus-visible{outline:3px solid #b7ff3b;outline-offset:3px}