/**
 * Estilos Oficiais do Sistema de Fichas de Rhaokar
 * Tema Dark Fantasy RPG, responsivo para celular (Mobile-First) e desktop.
 */

:root {
	--rhaokar-bg-dark: #141619;
	--rhaokar-bg-card: #1c2026;
	--rhaokar-bg-input: #121418;
	--rhaokar-gold: #ffd700;
	--rhaokar-gold-dark: #b8860b;
	--rhaokar-border: #38404d;
	--rhaokar-text: #e0e6ed;
	--rhaokar-text-muted: #9aa5b5;
	--rhaokar-danger: #ff4d4f;
	--rhaokar-success: #52c41a;
}

/* Container Geral da Área do Jogador */
.rhaokar-player-area-wrapper,
.rhaokar-system-selector-wrapper,
.rhaokar-builder-wrapper,
.rhaokar-guest-container,
.rhaokar-auth-container {
	background-color: var(--rhaokar-bg-dark);
	color: var(--rhaokar-text);
	border: 2px solid var(--rhaokar-gold-dark);
	border-radius: 10px;
	padding: 24px;
	margin: 20px auto 40px auto;
	max-width: 1200px;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85);
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

/* Cabeçalho do Jogador */
.rhaokar-player-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid var(--rhaokar-gold-dark);
	padding-bottom: 20px;
	margin-bottom: 20px;
	gap: 16px;
}

.rhaokar-player-profile {
	display: flex;
	align-items: center;
	gap: 16px;
}

.rhaokar-player-avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid var(--rhaokar-gold);
	box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.rhaokar-player-tag {
	font-size: 0.7rem;
	letter-spacing: 1px;
	color: var(--rhaokar-gold);
	font-weight: 700;
	text-transform: uppercase;
}

.rhaokar-player-name {
	margin: 2px 0;
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: 700;
}

.rhaokar-player-email {
	font-size: 0.85rem;
	color: var(--rhaokar-text-muted);
}

.rhaokar-player-actions-top {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Botões */
.rhaokar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 18px;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s ease;
	border: 1px solid transparent;
}

.rhaokar-btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.rhaokar-btn-gold {
	background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
	color: #000000 !important;
	border-color: #b8860b;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(255, 215, 0, 0.25);
}

.rhaokar-btn-gold:hover {
	background: #ffffff;
	color: #000000 !important;
	box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}

.rhaokar-btn-outline {
	background: rgba(255, 255, 255, 0.05);
	color: var(--rhaokar-gold) !important;
	border-color: var(--rhaokar-gold-dark);
}

.rhaokar-btn-outline:hover {
	background: var(--rhaokar-gold-dark);
	color: #000000 !important;
}

.rhaokar-btn-danger-outline {
	background: transparent;
	color: var(--rhaokar-danger) !important;
	border-color: var(--rhaokar-danger);
}

.rhaokar-btn-danger-outline:hover {
	background: var(--rhaokar-danger);
	color: #ffffff !important;
}

.rhaokar-btn-block {
	display: flex;
	width: 100%;
}

.rhaokar-btn-sm {
	padding: 5px 12px;
	font-size: 0.8rem;
}

.rhaokar-btn-link {
	color: var(--rhaokar-gold) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 2px 6px !important;
	cursor: pointer !important;
	font-size: 0.85rem !important;
	display: inline-flex !important;
	align-items: center !important;
}

.rhaokar-btn-link:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
	background: transparent !important;
	border: none !important;
}

/* Estatísticas Rápidas */
.rhaokar-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 25px;
}

.rhaokar-stat-card {
	background: var(--rhaokar-bg-card);
	border: 1px solid var(--rhaokar-border);
	border-radius: 8px;
	padding: 16px;
	text-align: center;
}

.rhaokar-stat-num {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--rhaokar-gold);
}

.rhaokar-stat-label {
	font-size: 0.8rem;
	color: var(--rhaokar-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Grade de Personagens */
.rhaokar-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
}

.rhaokar-section-header h3 {
	margin: 0;
	color: var(--rhaokar-gold);
	font-size: 1.3rem;
}

.rhaokar-character-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 20px;
}

.rhaokar-char-card {
	background: var(--rhaokar-bg-card);
	border: 1px solid var(--rhaokar-border);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
}

.rhaokar-char-card:hover {
	border-color: var(--rhaokar-gold);
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.rhaokar-char-card-img {
	height: 160px;
	background-size: cover;
	background-position: center;
	position: relative;
	background-color: #0b0d10;
}

.rhaokar-char-card-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	justify-content: space-between;
}

.rhaokar-badge-system {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	text-transform: uppercase;
}

.rhaokar-badge-status {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.rhaokar-status-ativo {
	background: #133a1b;
	color: #52c41a;
	border: 1px solid #52c41a;
}

.rhaokar-status-aposentado {
	background: #3a2e13;
	color: #faad14;
	border: 1px solid #faad14;
}

.rhaokar-status-morto {
	background: #3a1313;
	color: #ff4d4f;
	border: 1px solid #ff4d4f;
}

.rhaokar-char-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rhaokar-char-name {
	margin: 0 0 10px 0;
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 700;
}

.rhaokar-char-meta {
	font-size: 0.85rem;
	color: var(--rhaokar-text-muted);
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
	flex: 1;
}

.rhaokar-char-meta span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rhaokar-char-card-actions {
	display: flex;
	gap: 8px;
	border-top: 1px solid var(--rhaokar-border);
	padding-top: 12px;
}

.rhaokar-card-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 10px;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 4px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	cursor: pointer;
}

.rhaokar-card-view {
	background: #232a33;
	color: #ffffff !important;
	border-color: #3e4856;
}

.rhaokar-card-view:hover {
	background: var(--rhaokar-gold);
	color: #000000 !important;
}

.rhaokar-card-edit {
	background: rgba(184, 134, 11, 0.25);
	color: var(--rhaokar-gold) !important;
	border-color: var(--rhaokar-gold-dark);
}

.rhaokar-card-edit:hover {
	background: var(--rhaokar-gold-dark);
	color: #000000 !important;
}

.rhaokar-card-delete {
	background: rgba(255, 77, 79, 0.15);
	color: var(--rhaokar-danger);
	border-color: rgba(255, 77, 79, 0.3);
	flex: 0 0 34px;
}

.rhaokar-card-delete:hover {
	background: var(--rhaokar-danger);
	color: #ffffff;
}

/* Empty State */
.rhaokar-empty-state {
	text-align: center;
	padding: 50px 20px;
	background: var(--rhaokar-bg-card);
	border: 1px dashed var(--rhaokar-border);
	border-radius: 8px;
}

.rhaokar-empty-icon span {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--rhaokar-gold);
	margin-bottom: 14px;
}

/* ==================== SELETOR DE SISTEMA ==================== */
.rhaokar-selector-header {
	text-align: center;
	margin-bottom: 30px;
}

.rhaokar-selector-title {
	color: var(--rhaokar-gold);
	font-size: 1.8rem;
	margin: 10px 0;
}

.rhaokar-selector-subtitle {
	color: var(--rhaokar-text-muted);
	max-width: 650px;
	margin: 0 auto;
	font-size: 0.95rem;
}

.rhaokar-systems-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.rhaokar-system-card {
	background: var(--rhaokar-bg-card);
	border: 2px solid var(--rhaokar-border);
	border-radius: 10px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	text-align: center;
	transition: all 0.25s ease;
}

.rhaokar-system-card:hover {
	border-color: var(--rhaokar-gold);
	transform: translateY(-4px);
}

.rhaokar-system-card-icon span {
	font-size: 42px;
	width: 42px;
	height: 42px;
	margin-bottom: 12px;
}

.rhaokar-system-name {
	color: #ffffff;
	font-size: 1.35rem;
	margin: 10px 0;
}

.rhaokar-system-desc {
	color: var(--rhaokar-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	flex: 1;
	margin-bottom: 20px;
}

/* ==================== FORMULÁRIO DO BUILDER (MOBILE-FIRST) ==================== */
.rhaokar-builder-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid var(--rhaokar-gold-dark);
	padding-bottom: 18px;
	margin-bottom: 20px;
	gap: 14px;
}

.rhaokar-builder-title-area {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rhaokar-builder-title {
	margin: 0 0 4px 0;
	color: #ffffff;
	font-size: 1.4rem;
}

.rhaokar-builder-system-badge {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 20px;
	text-transform: uppercase;
}

/* Abas Táteis */
.rhaokar-builder-tabs-nav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 10px;
	margin-bottom: 24px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.rhaokar-builder-tabs-nav::-webkit-scrollbar {
	height: 4px;
}

.rhaokar-builder-tabs-nav::-webkit-scrollbar-thumb {
	background: var(--rhaokar-gold-dark);
	border-radius: 4px;
}

.rhaokar-tab-btn {
	background: var(--rhaokar-bg-card);
	border: 1px solid var(--rhaokar-border);
	color: var(--rhaokar-text-muted);
	padding: 10px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.85rem;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.rhaokar-tab-btn:hover {
	color: #ffffff;
	border-color: var(--rhaokar-gold);
}

.rhaokar-tab-btn.active {
	background: var(--rhaokar-gold-dark);
	color: #000000;
	font-weight: 700;
	border-color: var(--rhaokar-gold);
}

.rhaokar-tab-pane {
	display: none;
}

.rhaokar-tab-pane.active {
	display: block;
	animation: rhaokarFadeIn 0.25s ease-in-out;
}

@keyframes rhaokarFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Painéis de Campos */
.rhaokar-card-panel {
	background: var(--rhaokar-bg-card);
	border: 1px solid var(--rhaokar-border);
	border-radius: 8px;
	padding: 20px;
}

.rhaokar-panel-title {
	color: var(--rhaokar-gold);
	font-size: 1.15rem;
	margin: 0 0 14px 0;
	border-bottom: 1px solid rgba(255, 215, 0, 0.2);
	padding-bottom: 8px;
}

.rhaokar-panel-desc {
	font-size: 0.85rem;
	color: var(--rhaokar-text-muted);
	margin-top: -6px;
	margin-bottom: 16px;
}

/* Grid de Formulário */
.rhaokar-form-grid {
	display: flex;
	flex-wrap: wrap;
	margin: -8px;
}

.rhaokar-col-12 { width: 100%; padding: 8px; box-sizing: border-box; }
.rhaokar-col-6  { width: 50%; padding: 8px; box-sizing: border-box; }

@media (min-width: 768px) {
	.rhaokar-col-md-6 { width: 50%; }
	.rhaokar-col-md-4 { width: 33.333%; }
	.rhaokar-col-md-3 { width: 25%; }
	.rhaokar-col-md-2 { width: 16.666%; }
	.rhaokar-col-md-1 { width: 8.333%; }
}

.rhaokar-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rhaokar-form-group label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--rhaokar-text);
}

.rhaokar-req {
	color: var(--rhaokar-danger);
}

.rhaokar-input,
.rhaokar-select,
.rhaokar-textarea {
	background-color: var(--rhaokar-bg-input);
	border: 1px solid var(--rhaokar-border);
	color: #ffffff;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 0.95rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.rhaokar-input:focus,
.rhaokar-select:focus,
.rhaokar-textarea:focus {
	border-color: var(--rhaokar-gold);
	box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

/* Força fonte moderna sem serifa e desativa setas nativas nos inputs numéricos para evitar truncamento */
.rhaokar-builder-wrapper input,
.rhaokar-builder-wrapper select,
.rhaokar-builder-wrapper textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-variant-numeric: normal !important;
	letter-spacing: normal !important;
	box-sizing: border-box !important;
}

.rhaokar-builder-wrapper input[type="number"]::-webkit-inner-spin-button,
.rhaokar-builder-wrapper input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	display: none !important;
}

.rhaokar-builder-wrapper input[type="number"] {
	-moz-appearance: textfield !important;
}

/* Media Uploader */
.rhaokar-media-uploader {
	display: flex;
	align-items: center;
	gap: 16px;
}

.rhaokar-media-preview {
	width: 70px;
	height: 70px;
	border-radius: 8px;
	border: 1px solid var(--rhaokar-border);
	background-color: #0d0f12;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rhaokar-text-muted);
}

/* Atributos Grid (Acomoda os 6 blocos com boa largura no Desktop) */
.rhaokar-attributes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: 14px;
}

.rhaokar-attr-box {
	background: #14171d !important;
	border: 1px solid #333a46 !important;
	border-radius: 8px;
	padding: 12px 8px;
	text-align: center;
}

.rhaokar-attr-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.rhaokar-attr-code {
	font-weight: 700;
	color: var(--rhaokar-gold);
	font-size: 1.15rem;
}

.rhaokar-attr-mod-pill {
	background: var(--rhaokar-gold);
	color: #000000;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 2px 8px;
	border-radius: 12px;
}

.rhaokar-attr-title {
	display: block;
	font-size: 0.72rem;
	color: var(--rhaokar-text-muted);
	margin-bottom: 8px;
}

.rhaokar-attr-fields {
	display: flex;
	gap: 4px;
	justify-content: space-between;
}

.rhaokar-attr-field-item {
	flex: 1;
	min-width: 0;
}

.rhaokar-attr-field-item label {
	font-size: 0.68rem;
	color: var(--rhaokar-text-muted);
	display: block;
	margin-bottom: 3px;
	font-weight: 600;
	text-transform: uppercase;
}

.rhaokar-attr-field-item input.rhaokar-attr-input {
	width: 100% !important;
	height: 38px !important;
	padding: 4px 2px !important;
	text-align: center !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background-color: #0b0d10 !important;
	border: 1px solid #3d4655 !important;
	border-radius: 4px !important;
	outline: none;
}

.rhaokar-attr-field-item input.rhaokar-attr-input:focus {
	border-color: var(--rhaokar-gold) !important;
	background-color: #161b22 !important;
	box-shadow: 0 0 6px rgba(255, 215, 0, 0.4) !important;
}

.rhaokar-attr-total-footer {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid var(--rhaokar-border);
	font-size: 0.82rem;
	color: var(--rhaokar-text);
}

/* Saves Grid */
.rhaokar-saves-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.rhaokar-save-box {
	background: #14171d !important;
	border: 1px solid #333a46 !important;
	border-radius: 8px;
	padding: 16px;
}

.rhaokar-save-title {
	font-weight: 700;
	font-size: 1.05rem;
}

/* ==================== TABELA DE PERÍCIAS & REGRAS DE CONTRASTE ==================== */
.rhaokar-skills-table-responsive {
	overflow-x: auto;
	margin-top: 10px;
	border-radius: 6px;
	border: 1px solid var(--rhaokar-border);
}

.rhaokar-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0;
}

.rhaokar-table th {
	background: #111418 !important;
	color: #ffd700 !important;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 12px;
	border-bottom: 2px solid var(--rhaokar-border) !important;
}

.rhaokar-table td {
	padding: 8px 12px;
	vertical-align: middle;
	font-size: 0.9rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 1. LINHAS PRETAS (Fundo Preto -> Letras Brancas e Douradas) */
.rhaokar-table tbody tr:nth-child(odd),
.rhaokar-table tbody tr.rhaokar-row-black,
.rhaokar-table tbody tr.rhaokar-row-dark {
	background-color: #121418 !important;
	color: #ffffff !important;
}

.rhaokar-table tbody tr:nth-child(odd) td,
.rhaokar-table tbody tr:nth-child(odd) span,
.rhaokar-table tbody tr:nth-child(odd) label,
.rhaokar-table tbody tr.rhaokar-row-black td,
.rhaokar-table tbody tr.rhaokar-row-black span,
.rhaokar-table tbody tr.rhaokar-row-black label,
.rhaokar-table tbody tr.rhaokar-row-dark td,
.rhaokar-table tbody tr.rhaokar-row-dark span,
.rhaokar-table tbody tr.rhaokar-row-dark label {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.rhaokar-table tbody tr:nth-child(odd) strong,
.rhaokar-table tbody tr.rhaokar-row-black strong,
.rhaokar-table tbody tr.rhaokar-row-dark strong,
.rhaokar-table tbody tr strong.rhaokar-skill-name {
	color: #ffd700 !important;
	-webkit-text-fill-color: #ffd700 !important;
	font-weight: 700 !important;
}

/* 2. LINHAS CINZA ESCURO (Fundo Cinza Escuro -> Letras Brancas e Douradas) */
.rhaokar-table tbody tr:nth-child(even),
.rhaokar-table tbody tr.rhaokar-row-darkgray,
.rhaokar-table tbody tr.rhaokar-row-gray,
.rhaokar-table tbody tr.rhaokar-row-white,
.rhaokar-table tbody tr.rhaokar-row-light {
	background-color: #222730 !important; /* Cinza escuro elegante */
	color: #ffffff !important;
}

.rhaokar-table tbody tr:nth-child(even) td,
.rhaokar-table tbody tr:nth-child(even) span,
.rhaokar-table tbody tr:nth-child(even) label,
.rhaokar-table tbody tr.rhaokar-row-darkgray td,
.rhaokar-table tbody tr.rhaokar-row-darkgray span,
.rhaokar-table tbody tr.rhaokar-row-darkgray label,
.rhaokar-table tbody tr.rhaokar-row-gray td,
.rhaokar-table tbody tr.rhaokar-row-gray span,
.rhaokar-table tbody tr.rhaokar-row-gray label,
.rhaokar-table tbody tr.rhaokar-row-white td,
.rhaokar-table tbody tr.rhaokar-row-white span,
.rhaokar-table tbody tr.rhaokar-row-white label,
.rhaokar-table tbody tr.rhaokar-row-light td,
.rhaokar-table tbody tr.rhaokar-row-light span,
.rhaokar-table tbody tr.rhaokar-row-light label {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.rhaokar-table tbody tr:nth-child(even) strong,
.rhaokar-table tbody tr.rhaokar-row-darkgray strong,
.rhaokar-table tbody tr.rhaokar-row-gray strong,
.rhaokar-table tbody tr.rhaokar-row-white strong,
.rhaokar-table tbody tr.rhaokar-row-light strong {
	color: #ffd700 !important;
	-webkit-text-fill-color: #ffd700 !important;
	font-weight: 700 !important;
}

/* 3. CAMPOS DE DIGITAÇÃO EM TODAS AS LINHAS DA TABELA (Fundo Escuro + Letras Brancas Nítidas) */
.rhaokar-table tbody .rhaokar-input-sm,
.rhaokar-table tbody input[type="number"],
.rhaokar-table tbody input[type="text"] {
	background-color: #0b0d10 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 1px solid #454f5e !important;
	font-weight: 700 !important;
}

.rhaokar-table tbody .rhaokar-input-sm:focus,
.rhaokar-table tbody input[type="number"]:focus,
.rhaokar-table tbody input[type="text"]:focus {
	background-color: #14171d !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border-color: #ffd700 !important;
	box-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
}


/* Badge de Atributo (FOR, DES, CON, INT, SAB, CAR) */
.rhaokar-attr-badge {
	background: #1c2128 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 4px;
	border: 1px solid #4a5463;
	display: inline-block;
}

.rhaokar-tag-trained {
	color: #e53935 !important;
	font-weight: 900;
	margin-left: 2px;
}

/* Regra Geral Global: Sempre que qualquer campo input tiver fundo branco, a letra DEVE ser preta */
.rhaokar-builder-wrapper input[style*="background: white"],
.rhaokar-builder-wrapper input[style*="background-color: white"],
.rhaokar-builder-wrapper input[style*="background: #fff"],
.rhaokar-builder-wrapper input[style*="background-color: #fff"],
.rhaokar-builder-wrapper input[style*="background: rgb(255, 255, 255)"],
.rhaokar-builder-wrapper input[style*="background-color: rgb(255, 255, 255)"],
input.rhaokar-input-light {
	background-color: #ffffff !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	font-weight: 600 !important;
}


/* Moedas */
.rhaokar-coins-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.rhaokar-coin-box {
	flex: 1;
	min-width: 120px;
	background: var(--rhaokar-bg-input);
	border: 1px solid var(--rhaokar-border);
	border-radius: 6px;
	padding: 10px;
}

.coin-gold label { color: #ffd700; }
.coin-silver label { color: #c0c0c0; }
.coin-copper label { color: #cd7f32; }

/* Botão Flutuante Inferior para Celular */
.rhaokar-builder-sticky-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(14, 16, 20, 0.96);
	border-top: 2px solid var(--rhaokar-gold-dark);
	padding: 12px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 9999;
	backdrop-filter: blur(8px);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.7);
}

.rhaokar-sticky-status {
	font-size: 0.85rem;
	color: var(--rhaokar-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.rhaokar-sticky-actions {
	display: flex;
	gap: 10px;
}

/* ==================== ESTILOS DOS NOVOS CAMPOS & REPETIDORES ==================== */
.rhaokar-armor-card,
.rhaokar-shield-card,
.rhaokar-companion-card,
.rhaokar-base-card,
.rhaokar-feat-card,
.rhaokar-equipment-card,
.rhaokar-skill-card,
.rhaokar-spell-slot-card,
.rhaokar-manobra-card,
.rhaokar-poder-card,
.rhaokar-invocacao-card {
	background: #14171d !important;
	border: 1px solid var(--rhaokar-border) !important;
	border-left: 3px solid var(--rhaokar-gold) !important;
	border-radius: 8px !important;
	padding: 16px !important;
	margin-bottom: 14px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rhaokar-armor-card:hover,
.rhaokar-shield-card:hover,
.rhaokar-companion-card:hover,
.rhaokar-base-card:hover,
.rhaokar-feat-card:hover,
.rhaokar-equipment-card:hover,
.rhaokar-skill-card:hover,
.rhaokar-spell-slot-card:hover,
.rhaokar-manobra-card:hover,
.rhaokar-poder-card:hover,
.rhaokar-invocacao-card:hover {
	border-color: var(--rhaokar-gold) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.rhaokar-spell-slot-card,
.rhaokar-manobra-card,
.rhaokar-poder-card,
.rhaokar-invocacao-card,
.rhaokar-weapon-card,
.rhaokar-weapon-row,
.rhaokar-armor-card,
.rhaokar-shield-card,
.rhaokar-equipment-card,
.rhaokar-companion-card,
.rhaokar-base-card,
.rhaokar-feat-card,
.rhaokar-class-row,
.rhaokar-idioma-row,
.rhaokar-bba-row,
.rhaokar-feature-row,
.rhaokar-traco-row {
	position: relative !important;
	padding-top: 16px !important;
	padding-left: 46px !important;
	padding-right: 14px !important;
	padding-bottom: 14px !important;
	box-sizing: border-box !important;
	background: #15181f !important;
	border: 1px solid #2b323d !important;
	border-radius: 8px !important;
	margin-bottom: 12px !important;
}

/* Botão [x] de Remoção Unificado no Canto Superior Esquerdo */
.rhaokar-btn-card-close,
.rhaokar-btn-icon-danger {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: rgba(255, 77, 79, 0.18) !important;
	border: 1px solid rgba(255, 77, 79, 0.5) !important;
	color: #ff4d4f !important;
	font-size: 18px !important;
	font-weight: bold !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	z-index: 10 !important;
	padding: 0 !important;
	outline: none !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
}

.rhaokar-btn-card-close:hover,
.rhaokar-btn-icon-danger:hover {
	background: #ff4d4f !important;
	color: #ffffff !important;
	transform: scale(1.1) !important;
	border-color: #ff4d4f !important;
}

.rhaokar-save-base-row,
.rhaokar-save-var-row {
	position: relative !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	background: #0d0f13 !important;
	border: 1px solid #2b323d !important;
	border-radius: 6px !important;
	padding: 8px 10px 8px 42px !important;
	margin-bottom: 8px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}

.rhaokar-save-base-row .rhaokar-btn-card-close,
.rhaokar-save-var-row .rhaokar-btn-card-close,
.rhaokar-save-base-row .rhaokar-btn-icon-danger,
.rhaokar-save-var-row .rhaokar-btn-icon-danger {
	top: 8px !important;
	left: 8px !important;
	width: 24px !important;
	height: 24px !important;
	font-size: 16px !important;
}

/* Linha de bônus variados dos Saves */
.rhaokar-save-var-val {
	width: 48px !important;
	flex: 0 0 48px !important;
	text-align: center !important;
	font-weight: 700 !important;
	height: 32px !important;
	background-color: #07090b !important;
	border: 1px solid #3d4655 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	font-size: 0.9rem !important;
}

.rhaokar-save-var-type {
	flex: 1 1 115px !important;
	min-width: 100px !important;
	max-width: 100% !important;
	height: 32px !important;
	background-color: #07090b !important;
	border: 1px solid #3d4655 !important;
	color: #ffd700 !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	border-radius: 4px !important;
	padding: 2px 8px !important;
	cursor: pointer;
}

.rhaokar-save-var-type option {
	background-color: #14171d !important;
	color: #ffffff !important;
}

/* Detalhamento de Modificadores de Atributos */
.rhaokar-attr-breakdown-panel {
	margin-top: 10px;
	padding: 8px;
	background: #090b0e;
	border: 1px dashed #3d4655;
	border-radius: 6px;
	text-align: left;
}

.rhaokar-attr-mod-row {
	position: relative !important;
	background: #11141a;
	border: 1px solid #2a313d;
	border-radius: 4px;
	padding: 6px 6px 6px 36px !important;
	margin-bottom: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rhaokar-attr-mod-row .rhaokar-btn-card-close,
.rhaokar-attr-mod-row .rhaokar-btn-icon-danger {
	top: 6px !important;
	left: 6px !important;
	width: 22px !important;
	height: 22px !important;
	font-size: 15px !important;
}

.rhaokar-attr-mod-top {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.rhaokar-attr-mod-top .rhaokar-attr-mod-val {
	width: 48px !important;
	flex: 0 0 48px !important;
	text-align: center !important;
	font-weight: 700 !important;
	height: 30px !important;
	background-color: #07090b !important;
	border: 1px solid #3d4655 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	font-size: 0.85rem !important;
}

.rhaokar-attr-mod-top .rhaokar-attr-mod-type {
	flex: 1 !important;
	min-width: 0 !important;
	height: 30px !important;
	background-color: #07090b !important;
	border: 1px solid #3d4655 !important;
	color: #ffd700 !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	border-radius: 4px !important;
	padding: 2px 4px !important;
}

.rhaokar-attr-mod-top .rhaokar-attr-mod-type option {
	background-color: #14171d !important;
	color: #ffffff !important;
}

.rhaokar-attr-mod-orig-wrap {
	width: 100%;
}

.rhaokar-attr-mod-orig {
	width: 100% !important;
	height: 28px !important;
	font-size: 0.8rem !important;
	background-color: #07090b !important;
	border: 1px solid #282f3a !important;
	color: #e0e6ed !important;
	border-radius: 4px !important;
	padding: 2px 6px !important;
	box-sizing: border-box !important;
}

.rhaokar-input-xs,
.rhaokar-select-xs {
	background-color: #07090b;
	border: 1px solid #3d4655;
	color: #ffffff;
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 0.82rem;
	outline: none;
}

.rhaokar-input-xs:focus,
.rhaokar-select-xs:focus {
	border-color: var(--rhaokar-gold);
}

.rhaokar-btn-xs {
	padding: 2px 8px;
	font-size: 0.75rem;
}

.rhaokar-btn-link {
	background: none;
	border: none;
	color: var(--rhaokar-gold);
	font-size: 0.75rem;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.rhaokar-btn-link:hover {
	color: #ffffff;
}

/* 11 Slots Corporais de Itens Mágicos */
.rhaokar-slots-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.rhaokar-slot-item-box {
	background: #14171d;
	border: 1px solid var(--rhaokar-border);
	border-left: 3px solid var(--rhaokar-gold);
	border-radius: 6px;
	padding: 12px;
	transition: all 0.2s ease;
}

.rhaokar-slot-item-box:hover {
	border-color: var(--rhaokar-gold-dark);
	background: #181c24;
}

.rhaokar-slot-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.rhaokar-slot-name {
	color: var(--rhaokar-gold);
	font-size: 0.95rem;
}

.rhaokar-slot-desc {
	color: var(--rhaokar-text-muted);
	font-size: 0.75rem;
}

/* Tabela de Espaços de Magia */
.rhaokar-spells-table-responsive {
	overflow-x: auto;
	margin-top: 10px;
	border-radius: 6px;
	border: 1px solid var(--rhaokar-border);
}

.rhaokar-select-sm {
	background-color: var(--rhaokar-bg-input);
	border: 1px solid var(--rhaokar-border);
	color: #ffffff;
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 0.85rem;
	outline: none;
}

/* Tela de Login */
.rhaokar-auth-container {
	max-width: 500px;
	padding: 36px 24px;
	text-align: center;
}

.rhaokar-auth-logo span {
	font-size: 52px;
	width: 52px;
	height: 52px;
	color: var(--rhaokar-gold);
	margin-bottom: 12px;
}

.rhaokar-auth-title {
	color: #ffffff;
	font-size: 1.5rem;
	margin: 0 0 8px 0;
}

.rhaokar-auth-subtitle {
	color: var(--rhaokar-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 24px;
}

.rhaokar-input-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.rhaokar-input-icon-wrap span {
	position: absolute;
	left: 12px;
	color: var(--rhaokar-gold);
}

.rhaokar-input-icon-wrap input {
	padding-left: 40px;
}

.rhaokar-auth-footer {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--rhaokar-border);
}

/* Responsividade Mobile */
@media (max-width: 767.98px) {
	.rhaokar-player-area-wrapper,
	.rhaokar-builder-wrapper,
	.rhaokar-system-selector-wrapper,
	.rhaokar-guest-container,
	.rhaokar-auth-container {
		padding: 12px 10px !important;
		margin: 10px auto !important;
		border-radius: 6px !important;
		max-width: 100% !important;
		width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	.rhaokar-card-panel {
		padding: 14px 10px !important;
		margin-bottom: 14px !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	/* Ajuste dos cabeçalhos dos painéis para nunca truncar botões no mobile */
	.rhaokar-card-panel .d-flex.justify-content-between,
	.rhaokar-builder-section .d-flex.justify-content-between,
	.rhaokar-card-panel > div[class*="d-flex"][class*="justify-content-between"] {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	.rhaokar-card-panel .d-flex.justify-content-between h3,
	.rhaokar-card-panel .d-flex.justify-content-between h4,
	.rhaokar-card-panel .d-flex.justify-content-between .rhaokar-panel-title {
		margin-bottom: 0 !important;
		word-break: break-word !important;
	}

	.rhaokar-card-panel .d-flex.justify-content-between button,
	.rhaokar-card-panel .d-flex.justify-content-between .rhaokar-btn {
		width: 100% !important;
		text-align: center !important;
		justify-content: center !important;
		white-space: normal !important;
		box-sizing: border-box !important;
		padding: 8px 12px !important;
	}

	.rhaokar-player-header {
		flex-direction: column;
		text-align: center;
	}

	.rhaokar-player-profile {
		flex-direction: column;
	}

	.rhaokar-player-actions-top {
		width: 100%;
		justify-content: center;
	}

	.rhaokar-builder-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.rhaokar-builder-top-actions {
		display: none; /* Salvar é feito pela barra fixa inferior */
	}

	.rhaokar-builder-wrapper {
		padding-bottom: 80px; /* Evita que o conteúdo fique coberto pela barra fixa */
	}
}

/* ==========================================================================
   FABULA ULTIMA TT-RPG - ESTILOS VISUAIS (TEMA JRPG ESCURO PREMIUM)
   ========================================================================== */

.rhaokar-fu-attr-box {
	background: #0d0f14;
	border: 1px solid #2a313d;
	border-radius: 8px;
	padding: 14px 10px;
	transition: all 0.2s ease;
}
.rhaokar-fu-attr-box:hover {
	border-color: #d946ef;
	box-shadow: 0 0 12px rgba(217, 70, 239, 0.2);
}
.rhaokar-fu-attr-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(217, 70, 239, 0.15);
	color: #d946ef;
	margin-bottom: 6px;
}
.rhaokar-fu-attr-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 8px;
}
.rhaokar-fu-dice-row {
	display: flex;
	gap: 8px;
	justify-content: center;
}
.rhaokar-fu-die-col {
	flex: 1;
}
.rhaokar-fu-die-col label {
	font-size: 0.72rem;
	color: #94a3b8;
	margin-bottom: 2px;
	display: block;
}

/* Condições */
.rhaokar-conditions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}
.rhaokar-condition-chip {
	display: flex;
	flex-direction: column;
	background: #11141b;
	border: 1px solid #242b35;
	border-radius: 6px;
	padding: 8px 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.rhaokar-condition-chip input {
	margin-right: 6px;
	accent-color: #d946ef;
}
.rhaokar-condition-chip.active {
	background: rgba(217, 70, 239, 0.12);
	border-color: #d946ef;
}
.rhaokar-condition-name {
	font-weight: 700;
	color: #ffffff;
	font-size: 0.88rem;
}
.rhaokar-condition-desc {
	color: #94a3b8;
	font-size: 0.75rem;
	margin-top: 2px;
}
.rhaokar-condition-pill {
	display: inline-block;
	background: rgba(239, 68, 68, 0.2);
	border: 1px solid #ef4444;
	color: #fca5a5;
	border-radius: 20px;
	padding: 4px 10px;
	font-size: 0.8rem;
	font-weight: 700;
	margin: 2px 4px 2px 0;
}

/* Recursos Fabula */
.rhaokar-resource-box {
	background: #0d0f14;
	border: 1px solid #2a313d;
	border-radius: 8px;
	padding: 12px;
}
.rhaokar-hp-box { border-left: 4px solid #ef4444; }
.rhaokar-mp-box { border-left: 4px solid #3b82f6; }
.rhaokar-ip-box { border-left: 4px solid #10b981; }

.rhaokar-crisis-badge {
	font-size: 0.75rem;
	padding: 2px 6px;
	border-radius: 4px;
	background: #1e293b;
	color: #94a3b8;
}
.rhaokar-crisis-badge.in-crisis {
	background: #ef4444;
	color: #ffffff;
	font-weight: 700;
	animation: pulse 1.5s infinite;
}

/* Cards com botão fechar no canto superior esquerdo */
.rhaokar-fu-class-card,
.rhaokar-fu-bond-card,
.rhaokar-fu-spell-card,
.rhaokar-fu-slot-card,
.rhaokar-fu-invention-card,
.rhaokar-fu-vehicle-card,
.rhaokar-fu-companion-card,
.rhaokar-ik-weapon-card,
.rhaokar-ik-ability-card,
.rhaokar-ik-connection-card,
.rhaokar-ik-spell-card,
.rhaokar-ik-mechanika-card,
.rhaokar-ik-steamjack-card,
.rhaokar-ik-warbeast-card {
	position: relative !important;
	padding: 16px 14px 14px 46px !important;
	background: #0d0f14;
	border: 1px solid #252c37;
	border-radius: 8px;
	margin-bottom: 12px;
}
.rhaokar-fu-skill-row,
.rhaokar-fu-item-row {
	position: relative !important;
	padding: 8px 10px 8px 46px !important;
	background: #11141b;
	border: 1px solid #222933;
	border-radius: 6px;
	margin-bottom: 8px;
}

/* Elos */
.rhaokar-fu-emotions-row {
	background: #080a0d;
	border: 1px solid #212732;
	border-radius: 6px;
	padding: 8px 10px;
}
.fu-emotion-pair {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.8rem;
	color: #cbd5e1;
}
.fu-emotion-pair label {
	margin-bottom: 0;
	cursor: pointer;
}
.fu-emotion-pair input {
	margin-right: 3px;
	accent-color: #d946ef;
}

/* Afinidades Elementais */
.rhaokar-fu-affinities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 8px;
}
.rhaokar-fu-affinity-item {
	background: #0f1217;
	border: 1px solid #252c38;
	border-radius: 6px;
	padding: 8px 4px;
	text-align: center;
}
.rhaokar-fu-affinity-item .el-name {
	display: block;
	font-size: 0.72rem;
	color: #94a3b8;
	font-weight: 600;
}
.rhaokar-fu-affinity-item .el-val {
	display: block;
	font-size: 0.95rem;
	font-weight: 800;
	color: #ffffff;
}
.rhaokar-fu-affinity-item.vu { border-color: #ef4444; background: rgba(239, 68, 68, 0.15); }
.rhaokar-fu-affinity-item.vu .el-val { color: #f87171; }
.rhaokar-fu-affinity-item.rs { border-color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
.rhaokar-fu-affinity-item.rs .el-val { color: #60a5fa; }
.rhaokar-fu-affinity-item.im { border-color: #eab308; background: rgba(234, 179, 8, 0.15); }
.rhaokar-fu-affinity-item.im .el-val { color: #fde047; }
.rhaokar-fu-affinity-item.ab { border-color: #10b981; background: rgba(16, 185, 129, 0.15); }
.rhaokar-fu-affinity-item.ab .el-val { color: #34d399; }

/* Visualização Pública Fabula */
.rhaokar-fu-hero-banner {
	display: flex;
	align-items: center;
	gap: 20px;
	background: linear-gradient(135deg, #130a21 0%, #0d0f14 100%);
	border: 1px solid #3b1e54;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	flex-wrap: wrap;
}
.rhaokar-fu-hero-avatar-box {
	position: relative;
	width: 110px;
	height: 110px;
	flex: 0 0 110px;
}
.rhaokar-fu-hero-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid #d946ef;
}
.rhaokar-fu-hero-level {
	position: absolute;
	bottom: -6px;
	right: -6px;
	background: #d946ef;
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 12px;
}
.rhaokar-fu-hero-info {
	flex: 1;
	min-width: 250px;
}
.rhaokar-fu-hero-name {
	font-size: 1.8rem;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 4px 0;
}
.rhaokar-fu-hero-identity {
	font-size: 1.05rem;
	color: #c084fc;
	font-weight: 600;
	margin: 0 0 8px 0;
}
.rhaokar-fu-hero-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.rhaokar-fu-tag {
	background: #1e1338;
	border: 1px solid #4a2175;
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 0.78rem;
	color: #e2e8f0;
}

/* Barras JRPG */
.rhaokar-fu-resources-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}
.rhaokar-fu-resource-card {
	background: #0d0f14;
	border: 1px solid #232a35;
	border-radius: 8px;
	padding: 12px 14px;
}
.rhaokar-fu-bar-wrap {
	width: 100%;
	height: 10px;
	background: #1f242e;
	border-radius: 5px;
	overflow: hidden;
	margin: 4px 0;
}
.rhaokar-fu-bar-fill {
	height: 100%;
	border-radius: 5px;
	transition: width 0.3s ease;
}
.rhaokar-fu-bar-fill.hp { background: linear-gradient(90deg, #ef4444, #f87171); }
.rhaokar-fu-bar-fill.mp { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.rhaokar-fu-bar-fill.ip { background: linear-gradient(90deg, #10b981, #34d399); }

.rhaokar-fu-resource-card.def {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.rhaokar-fu-stat-badge {
	text-align: center;
}
.rhaokar-fu-stat-badge .num {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	color: #ffd700;
}
.rhaokar-fu-stat-badge .txt {
	font-size: 0.7rem;
	font-weight: 700;
	color: #94a3b8;
}

/* Cristais de Dados */
.rhaokar-fu-die-crystal {
	background: linear-gradient(135deg, #1b0e2d 0%, #0d0f14 100%);
	border: 1px solid #581c87;
	border-radius: 10px;
	padding: 12px 6px;
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.15);
}
.rhaokar-fu-die-crystal .die-label {
	display: block;
	font-size: 0.72rem;
	color: #c084fc;
	font-weight: 700;
	letter-spacing: 0.5px;
}
.rhaokar-fu-die-crystal .die-val {
	display: block;
	font-size: 1.5rem;
	font-weight: 900;
	color: #ffffff;
	margin: 4px 0;
	text-shadow: 0 0 8px rgba(217, 70, 239, 0.5);
}
.rhaokar-fu-die-crystal small {
	color: #94a3b8;
}

/* Elos View */
.rhaokar-fu-bond-view-card {
	background: #0f1217;
	border: 1px solid #28303d;
	border-radius: 8px;
	padding: 10px 12px;
}
.emotion-chip {
	display: inline-block;
	background: #1e1338;
	color: #d8b4fe;
	border: 1px solid #4a2175;
	border-radius: 12px;
	padding: 2px 8px;
	font-size: 0.75rem;
	font-weight: 600;
}

/* Equip View */
.rhaokar-fu-equip-view-box {
	background: #0d0f14;
	border: 1px solid #242c38;
	border-radius: 8px;
	padding: 10px 12px;
	min-height: 90px;
}
.rhaokar-fu-equip-view-box .slot-title {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	color: #94a3b8;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.rhaokar-fu-spell-view-card {
	background: #0d0f14;
	border: 1px solid #2a1f3d;
	border-radius: 8px;
	padding: 12px;
}
.rhaokar-fu-consumables-list {
	list-style: disc;
	padding-left: 20px;
	color: #e2e8f0;
}
.rhaokar-fu-consumables-list li {
	margin-bottom: 6px;
}

/* ==========================================================================
   22. IRON KINGDOMS FULL METAL FANTASY - ESTILOS VISUAIS EXCLUSIVOS
   ========================================================================== */

/* Dials & Gauges Steampunk */
.rhaokar-ik-gauge {
	background: radial-gradient(circle, #291407 0%, #150b03 100%);
	border: 2px solid #ea580c;
	border-radius: 10px;
	padding: 12px 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.rhaokar-ik-gauge .gauge-label {
	font-family: 'Cinzel', serif;
	font-size: 0.75rem;
	font-weight: 800;
	color: #fed7aa;
	letter-spacing: 0.5px;
	display: block;
	margin-bottom: 4px;
}
.rhaokar-ik-gauge .gauge-val {
	font-size: 1.85rem;
	font-weight: 900;
	color: #fb923c;
	background: transparent;
	border: none;
	width: 100%;
	line-height: 1.1;
}

/* Grupos de Atributos */
.rhaokar-ik-stat-group {
	background: #18110b;
	border: 1px solid #7c2d12;
	border-radius: 8px;
	padding: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.rhaokar-ik-stat-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #431407;
	padding-bottom: 8px;
	margin-bottom: 8px;
}
.rhaokar-ik-stat-head h4 {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 800;
	color: #fed7aa;
	letter-spacing: 0.5px;
}
.rhaokar-ik-stat-head .ik-stat-total {
	width: 55px;
	height: 36px;
	font-size: 1.25rem;
	background: #291407;
	border: 1px solid #ea580c;
	color: #fed7aa;
	border-radius: 6px;
}
.rhaokar-ik-stat-sub label {
	font-size: 0.82rem;
	color: #cbd5e1;
	margin-bottom: 0;
	font-weight: 600;
}
.rhaokar-ik-stat-sub .ik-stat-input {
	width: 52px;
	background: #0f0a06;
	border: 1px solid #78350f;
	color: #fed7aa;
	border-radius: 4px;
}

/* Painel de Feat Points */
.rhaokar-ik-feat-panel {
	background: #1f1208;
	border: 1px solid #c2410c;
	border-radius: 8px;
	padding: 12px 16px;
}
.rhaokar-ik-feat-token {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid #78350f;
	background: #130903;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #78350f;
	font-weight: 800;
	font-size: 1.05rem;
	transition: all 0.2s ease;
	margin-bottom: 0;
}
.rhaokar-ik-feat-token.active {
	border-color: #f59e0b;
	background: radial-gradient(circle, #b45309 0%, #451a03 100%);
	color: #fef3c7;
	box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}
.rhaokar-ik-feat-token input {
	display: none;
}

/* Life Spiral (Espiral de Vida) */
.rhaokar-ik-aspect-card {
	background: #120e0a;
	border: 2px solid #78350f;
	border-radius: 8px;
	padding: 14px;
	position: relative;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease;
}
.rhaokar-ik-aspect-card.phy {
	border-color: #dc2626;
}
.rhaokar-ik-aspect-card.agl {
	border-color: #ea580c;
}
.rhaokar-ik-aspect-card.int {
	border-color: #9333ea;
}
.rhaokar-ik-aspect-card.crippled {
	background: #2a0808 !important;
	border-color: #ff0000 !important;
	box-shadow: 0 0 16px rgba(255, 0, 0, 0.5) !important;
}
.rhaokar-ik-aspect-card .aspect-title {
	font-size: 0.88rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 12px;
	letter-spacing: 0.5px;
}
.rhaokar-ik-aspect-card.phy .aspect-title {
	color: #f87171;
}
.rhaokar-ik-aspect-card.agl .aspect-title {
	color: #fb923c;
}
.rhaokar-ik-aspect-card.int .aspect-title {
	color: #c084fc;
}
.ik-branch-col {
	text-align: center;
}
.branch-label {
	display: block;
	font-size: 0.72rem;
	color: #94a3b8;
	font-weight: 600;
	margin-bottom: 6px;
}
.ik-boxes-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}
.ik-spiral-box {
	width: 28px;
	height: 28px;
	border: 2px solid #52525b;
	border-radius: 4px;
	background: #09090b;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	margin-bottom: 0;
}
.ik-spiral-box input {
	display: none;
}
.ik-spiral-box.marked {
	background: #dc2626 !important;
	border-color: #f87171 !important;
	box-shadow: 0 0 8px rgba(220, 38, 38, 0.7) !important;
	position: relative;
}
.ik-spiral-box.marked::after {
	content: '✕';
	color: #fff;
	font-size: 15px;
	font-weight: 900;
}
.aspect-penalty-note {
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px solid #27272a;
	text-align: center;
	color: #a1a1aa;
	font-size: 0.75rem;
}

/* Steamjack Damage Grid */
.rhaokar-ik-damage-grid {
	background: #140d07;
	border: 2px solid #78350f;
	border-radius: 8px;
	padding: 12px;
	max-width: 440px;
	margin: 0 auto;
}
.grid-header-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fed7aa;
	margin-bottom: 6px;
}
.grid-cells-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	margin-bottom: 4px;
}
.grid-cell-box {
	aspect-ratio: 1;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.grid-cell-box.empty-cell {
	background: #0a0604;
	border: 1px dashed #291407;
}
.grid-cell-box.active-cell {
	border: 1px solid #78350f;
	background: #1c1007;
}
.ik-grid-box-label {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.85rem;
	cursor: pointer;
	margin-bottom: 0;
	transition: all 0.15s ease;
	border-radius: 3px;
}
.ik-grid-box-label input {
	display: none;
}
.sys-l span {
	color: #60a5fa;
}
.sys-r span {
	color: #4ade80;
}
.sys-m span {
	color: #fbbf24;
}
.sys-c span {
	color: #f472b6;
}
.ik-grid-box-label.marked {
	background: #b91c1c !important;
	color: #fff !important;
	text-decoration: line-through;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}
.ik-grid-box-label.marked span {
	color: #fff !important;
}

/* Steamjack Statbar */
.rhaokar-ik-steamjack-statbar {
	background: #110b06;
	border: 1px solid #431407;
	border-radius: 6px;
	padding: 8px;
	text-align: center;
}
.rhaokar-ik-steamjack-statbar small {
	display: block;
	font-weight: 700;
	color: #fed7aa;
	font-size: 0.7rem;
}
.rhaokar-ik-steamjack-statbar input {
	width: 44px;
}

/* Power Field Checkbox Box */
.rhaokar-ik-boxes-row {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.rhaokar-ik-checkbox-box {
	width: 34px;
	height: 34px;
	border: 2px solid #0284c7;
	border-radius: 6px;
	background: #082f49;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: 800;
	color: #38bdf8;
	margin-bottom: 0;
	transition: all 0.2s ease;
}
.rhaokar-ik-checkbox-box input {
	display: none;
}
.rhaokar-ik-checkbox-box.checked {
	background: #0284c7;
	color: #fff;
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}