/*
 * Sekai UI kit (src/lib/ui/) — shared component styles. The kit's JSX uses
 * gk-* classes; this sheet is linked wherever the kit is rendered (see
 * src/routes/kit/+page.tsx). Move the <link> into +layout.tsx if the kit
 * gets used across the whole site.
 */

:root {
	--gk-ink: #43406b;
	--gk-teal: #3fc1c0;
}

/* tokens.tsx — Texture overlay */
.gk-texture {
	pointer-events: none;
	position: absolute;
	inset: 0;
}

/* game-ui.tsx — Button */
.gk-btn {
	position: relative;
	width: 100%;
	overflow: hidden;
	text-align: center;
	border: 3px solid #fff;
	border-radius: 7px;
	box-shadow: var(--gk-ring), 0 2px 0 rgba(60, 58, 95, 0.3);
	transition: transform 60ms, box-shadow 60ms;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
}
.gk-btn:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow: var(--gk-ring), 0 0 0 rgba(60, 58, 95, 0.3);
}
.gk-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
.gk-btn-in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 16px;
	color: #43406b;
}
.gk-btn-lg.gk-btn-in {
	flex-direction: column;
	padding: 16px 12px;
}
.gk-btn-latin {
	display: block;
	font-weight: 500;
	letter-spacing: 0.09em;
	font-size: 9px;
	color: rgba(67, 64, 107, 0.55);
}
.gk-btn-lg .gk-btn-latin {
	font-size: 10.5px;
}
.gk-btn-label {
	display: block;
	font-weight: 500;
	font-size: 13px;
}
.gk-btn-lg .gk-btn-label {
	font-size: 15px;
}

/* game-ui.tsx — Tabs / Input / Toggle */
.gk-tab {
	position: relative;
	overflow: hidden;
	font-weight: 500;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.gk-input {
	display: block;
}
.gk-toggle {
	cursor: pointer;
	padding: 0;
}

/* game-ui-more.tsx — IconButton */
.gk-ibtn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2.5px solid #fff;
	border-radius: 999px;
	color: var(--gk-ink);
	box-shadow: var(--gk-ring), 0 2px 0 rgba(60, 58, 95, 0.3);
	transition: transform 60ms, box-shadow 60ms;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
}
.gk-ibtn:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow: var(--gk-ring), 0 0 0 rgba(60, 58, 95, 0.3);
}

/* game-ui-more.tsx — Checkbox / RadioGroup rows, Accordion head */
.gk-rowbtn {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.gk-acc-head {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 12px;
	text-align: left;
	font-weight: 500;
	padding: 9px 12px;
	font-size: 12.5px;
	color: var(--gk-ink);
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* game-ui-more.tsx — Tooltip */
.gk-tip {
	position: relative;
	display: inline-flex;
}
.gk-tip-box {
	pointer-events: none;
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--gk-ink);
	color: #fff;
	font-weight: 500;
	font-size: 11px;
	padding: 4px 9px;
	border-radius: 5px;
	white-space: nowrap;
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	transition: opacity 80ms;
}
.gk-tip:hover .gk-tip-box {
	visibility: visible;
	opacity: 1;
}