/**
 * Wheel of Destiny — reference diagram shortcode ([gp_wheel]).
 *
 * Geometry ported from the in-game renderer (tibia/characters.php). Sprite
 * background-images are injected inline by PHP (they need the theme URI), so
 * this file is image-URL-free. Vocation switching is pure CSS: radio inputs
 * are direct children of .gpw, ordered to match the .gpw-wheel layers, and
 * the :nth-of-type(n):checked ~ ... rules reveal the matching wheel/tab.
 */

.gpw {
	position: relative;
	margin: 0 0 22px;
}

/* Hidden radios drive the toggle. */
.gpw-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Vocation tabs reuse the site tab-strip styling (.gp-tabs-nav / .gp-tab-btn
   from base.css); only the keyboard-focus affordance is added here. */
.gpw-radio:focus-visible ~ .gpw-tabs {
	outline: 2px solid var(--gp-gold, #c7961b);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Stage + wheels. */
.gpw-stage {
	position: relative;
}

.gpw-wheel {
	display: none;
}

.gpw-client-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	/* Generous top/bottom room so the outermost perk tooltips don't clip
	   against the scroll viewport edge. */
	padding: 4.5rem 16px;
	margin: 0 auto;
	text-align: center;
	border: 1px solid var(--gp-line);
	border-radius: 10px;
	background: var(--gp-surf);
	box-sizing: border-box;
}

.gpw-client {
	position: relative;
	width: 522px;
	height: 522px;
	margin: 0 auto;
	text-align: left;
	isolation: isolate;
}

.gpw-layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 522px;
	height: 522px;
	display: block;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}

.gpw-perk {
	position: absolute;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	z-index: 5;
}

.gpw-mini {
	position: absolute;
	left: -3px;
	top: 17px;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	pointer-events: none;
}

.gpw-perk {
	cursor: pointer;
	touch-action: manipulation;
	outline: none;
}

.gpw-perk:hover,
.gpw-perk:focus,
.gpw-perk:active {
	z-index: 2147483646;
}

/* Tooltip. */
.gpw-tipbox {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	min-width: 220px;
	width: max-content;
	max-width: 360px;
	max-height: 220px;
	overflow: auto;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(20, 20, 20, .97);
	color: #fff;
	border: 1px solid rgba(255, 216, 105, .48);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .36);
	font-size: 12px;
	line-height: 1.35;
	white-space: normal;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 2147483647;
}

.gpw-perk:hover .gpw-tipbox,
.gpw-perk:focus .gpw-tipbox,
.gpw-perk:active .gpw-tipbox {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 760px) {
	.gpw-tipbox {
		left: 50%;
		bottom: calc(100% + 8px);
		right: auto;
		top: auto;
		transform: translateX(-50%);
		width: max-content;
		min-width: 190px;
		max-width: min(320px, calc(100vw - 24px));
		max-height: 38vh;
	}
}

/* ---- Pure-CSS vocation toggle (radio order == wheel/tab order). ---- */
.gpw-radio:nth-of-type(1):checked ~ .gpw-stage .gpw-wheel:nth-of-type(1),
.gpw-radio:nth-of-type(2):checked ~ .gpw-stage .gpw-wheel:nth-of-type(2),
.gpw-radio:nth-of-type(3):checked ~ .gpw-stage .gpw-wheel:nth-of-type(3),
.gpw-radio:nth-of-type(4):checked ~ .gpw-stage .gpw-wheel:nth-of-type(4),
.gpw-radio:nth-of-type(5):checked ~ .gpw-stage .gpw-wheel:nth-of-type(5) {
	display: block;
}

/* Active tab — mirrors .gp-tab-btn.is-on from base.css. */
.gpw-radio:nth-of-type(1):checked ~ .gpw-tabs .gp-tab-btn:nth-of-type(1),
.gpw-radio:nth-of-type(2):checked ~ .gpw-tabs .gp-tab-btn:nth-of-type(2),
.gpw-radio:nth-of-type(3):checked ~ .gpw-tabs .gp-tab-btn:nth-of-type(3),
.gpw-radio:nth-of-type(4):checked ~ .gpw-tabs .gp-tab-btn:nth-of-type(4),
.gpw-radio:nth-of-type(5):checked ~ .gpw-tabs .gp-tab-btn:nth-of-type(5) {
	color: var(--gp-gold);
	background: rgba(214, 178, 114, 0.18);
	border-color: var(--gp-gold);
}