/**
 * 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);
}

/* Life Spiral Locked Boxes & Aspect Counters */
.ik-spiral-box.box-locked {
	background: #141417 !important;
	border: 1px dashed #27272a !important;
	opacity: 0.25 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	box-shadow: none !important;
}
.ik-spiral-box.box-locked::after {
	display: none !important;
}
.ik-aspect-counter {
	font-size: 0.8rem;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(255,255,255,0.1);
}

/* Atributos: Valores Máximos & Alertas */
.ik-stat-max {
	background: rgba(0, 0, 0, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #94a3b8 !important;
	font-size: 0.85rem !important;
	width: 44px !important;
	border-radius: 4px;
}
.ik-stat-val.val-exceeded {
	border-color: #ef4444 !important;
	color: #f87171 !important;
	box-shadow: 0 0 6px rgba(239, 68, 68, 0.5) !important;
}
.ik-attr-dual-head {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ik-attr-dual-sub {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Configuração de Grade para Steamjacks e Warbeasts */
.rhaokar-ik-grid-config-panel {
	background: #0c0805;
	border: 1px dashed #ea580c;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 14px;
}
.ik-grid-config-header {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	margin-bottom: 8px;
	text-align: center;
}
.ik-grid-config-header small {
	font-size: 0.72rem;
	color: #fed7aa;
	font-weight: 700;
}
.ik-grid-config-matrix {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}
.ik-grid-system-select {
	width: 100%;
	background: #181008;
	border: 1px solid #78350f;
	color: #fed7aa;
	font-size: 0.72rem;
	padding: 3px 1px;
	border-radius: 4px;
	font-weight: 700;
	text-align: center;
}
.ik-grid-system-select:focus {
	border-color: #ea580c;
	outline: none;
}
.ik-sys-status-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 8px;
}
.ik-sys-badge {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,0.15);
	background: rgba(0,0,0,0.35);
}
.ik-sys-badge.crippled {
	background: #7f1d1d !important;
	border-color: #ef4444 !important;
	color: #fff !important;
	animation: ikPulse 1.5s infinite;
}
@keyframes ikPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* System Colors */
.sys-l span { color: #60a5fa !important; font-weight: 900; }
.sys-r span { color: #4ade80 !important; font-weight: 900; }
.sys-m span { color: #fbbf24 !important; font-weight: 900; }
.sys-c span { color: #f472b6 !important; font-weight: 900; }
.sys-s span { color: #cbd5e1 !important; font-weight: 900; }
.sys-b span { color: #f87171 !important; font-weight: 900; }
.sys-h span { color: #c084fc !important; font-weight: 900; }
.sys-a span { color: #38bdf8 !important; font-weight: 900; }
.sys-e span { color: #a3e635 !important; font-weight: 900; }

/* ============================================================
   IRON KINGDOMS - PUBLIC SHEET DISPLAY (FULL METAL FANTASY)
   ============================================================ */

.rhaokar-ik-single {
	color: #e2e8f0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Hero Banner */
.rhaokar-ik-hero-banner {
	display: flex;
	gap: 24px;
	align-items: center;
	background: linear-gradient(135deg, #1c150c 0%, #111317 100%);
	border: 2px solid #ea580c;
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(234, 88, 12, 0.3);
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.rhaokar-ik-hero-avatar-box {
	position: relative;
	width: 140px;
	height: 140px;
	flex-shrink: 0;
}

.rhaokar-ik-hero-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid #ea580c;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.rhaokar-ik-hero-tier {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: #ea580c;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 2px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
}

.rhaokar-ik-hero-info {
	flex: 1;
	min-width: 260px;
}

.rhaokar-ik-hero-name {
	font-size: 2.2rem;
	font-weight: 800;
	color: #f8fafc;
	margin: 4px 0 6px 0;
	line-height: 1.15;
	text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

.rhaokar-ik-hero-concept {
	font-size: 1.05rem;
	color: #fb923c;
	margin-bottom: 10px;
	font-style: italic;
}

.rhaokar-ik-hero-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.rhaokar-ik-tag {
	font-size: 0.82rem;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 3px 9px;
	border-radius: 6px;
	color: #cbd5e1;
}

.rhaokar-ik-tag strong {
	color: #fed7aa;
}

/* Combat Gauges (DEF, ARM, INIT, WIL, CMD) */
.rhaokar-ik-gauges-row {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 15px;
	margin-bottom: 20px;
}

.rhaokar-ik-gauge-card {
	flex: 1 1 180px;
	min-width: 130px;
	background: linear-gradient(180deg, #181d24 0%, #0d1015 100%);
	border: 2px solid #334155;
	border-radius: 10px;
	padding: 14px 10px;
	text-align: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	position: relative;
	transition: transform 0.2s, border-color 0.2s;
}

.rhaokar-ik-gauge-card:hover {
	transform: translateY(-2px);
	border-color: #ea580c;
}

.rhaokar-ik-gauge-card .num {
	font-size: 2.2rem;
	font-weight: 900;
	color: #f8fafc;
	line-height: 1;
	display: block;
	margin-bottom: 4px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.rhaokar-ik-gauge-card .lbl {
	font-size: 0.8rem;
	font-weight: 800;
	color: #ea580c;
	letter-spacing: 1px;
	display: block;
	text-transform: uppercase;
}

.rhaokar-ik-gauge-card small {
	font-size: 0.72rem;
	color: #94a3b8;
	display: block;
	margin-top: 2px;
}

.rhaokar-ik-gauge-card.highlight {
	border-color: #ffd700;
	background: linear-gradient(180deg, #241d0f 0%, #100e07 100%);
}

.rhaokar-ik-gauge-card.highlight .num {
	color: #ffd700;
}

/* Core Attributes Box */
.rhaokar-ik-stat-box {
	background: linear-gradient(180deg, #14181f 0%, #0c0f14 100%);
	border: 1px solid #334155;
	border-radius: 8px;
	padding: 16px 12px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.rhaokar-ik-stat-box.phy { border-color: #ef4444; }
.rhaokar-ik-stat-box.agl { border-color: #f97316; }
.rhaokar-ik-stat-box.int { border-color: #a855f7; }

.rhaokar-ik-stat-box .main-stat .val {
	font-size: 2.2rem;
	font-weight: 900;
	color: #ffffff;
	display: block;
	line-height: 1;
}

.rhaokar-ik-stat-box .main-stat .title {
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	display: block;
	margin-top: 4px;
	text-transform: uppercase;
}

.rhaokar-ik-stat-box.phy .main-stat .title { color: #f87171; }
.rhaokar-ik-stat-box.agl .main-stat .title { color: #fb923c; }
.rhaokar-ik-stat-box.int .main-stat .title { color: #c084fc; }

.rhaokar-ik-stat-box .sub-stats {
	display: flex;
	justify-content: space-around;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.95rem;
	color: #e2e8f0;
}

.rhaokar-ik-stat-box .sub-stats strong {
	color: #ffffff;
	font-size: 1.15rem;
	margin-left: 3px;
}

/* Life Spiral in Public Sheet */
.rhaokar-ik-aspect-view {
	background: linear-gradient(180deg, #13171d 0%, #0b0e12 100%);
	border: 1px solid #334155;
	border-radius: 8px;
	padding: 14px 10px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	margin-bottom: 10px;
}

.rhaokar-ik-aspect-view.phy { border-color: #ef4444; }
.rhaokar-ik-aspect-view.phy h4 { color: #f87171; font-size: 1rem; margin-bottom: 8px; }

.rhaokar-ik-aspect-view.agl { border-color: #f97316; }
.rhaokar-ik-aspect-view.agl h4 { color: #fb923c; font-size: 1rem; margin-bottom: 8px; }

.rhaokar-ik-aspect-view.int { border-color: #a855f7; }
.rhaokar-ik-aspect-view.int h4 { color: #c084fc; font-size: 1rem; margin-bottom: 8px; }

.rhaokar-ik-aspect-view.crippled {
	border-color: #dc2626 !important;
	background: rgba(220, 38, 38, 0.15) !important;
	box-shadow: 0 0 14px rgba(220, 38, 38, 0.35);
}

.boxes-row {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.spiral-dot {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #64748b;
	background: #090d14;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
	transition: all 0.2s ease;
}

.rhaokar-ik-aspect-view.phy .spiral-dot { border-color: #ef4444; }
.rhaokar-ik-aspect-view.agl .spiral-dot { border-color: #f97316; }
.rhaokar-ik-aspect-view.int .spiral-dot { border-color: #a855f7; }

.spiral-dot.marked {
	background: #dc2626 !important;
	border-color: #ef4444 !important;
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.spiral-dot.disabled-dot {
	opacity: 0.22;
	border-style: dashed;
	background: transparent;
	cursor: not-allowed;
}

/* Skills Layout & Badges in Public Sheet */
.rhaokar-ik-skill-block {
	background: #0f1318;
	border: 1px solid #1f2937;
	border-radius: 8px;
	padding: 14px;
	height: 100%;
}

.skill-category-title {
	font-size: 1.05rem;
	font-weight: 800;
	margin-bottom: 12px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.08);
	padding-bottom: 8px;
	letter-spacing: 0.5px;
}

.rhaokar-ik-skill-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rhaokar-ik-skill-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.03);
	font-size: 0.88rem;
	transition: background 0.15s;
}

.rhaokar-ik-skill-row:hover {
	background: rgba(255, 255, 255, 0.05);
}

.rhaokar-ik-skill-row.trained {
	background: rgba(234, 88, 12, 0.12);
	border: 1px solid rgba(234, 88, 12, 0.35);
	font-weight: 600;
}

.rhaokar-ik-skill-row.trained .skill-name {
	color: #fed7aa;
}

.skill-stat-tag {
	font-size: 0.7rem;
	font-weight: 700;
	background: #1e293b;
	color: #94a3b8;
	padding: 1px 5px;
	border-radius: 4px;
	margin-left: 6px;
}

.skill-rank-badge {
	font-size: 0.72rem;
	font-weight: 700;
	background: rgba(234, 88, 12, 0.25);
	color: #fb923c;
	border: 1px solid rgba(234, 88, 12, 0.4);
	padding: 1px 6px;
	border-radius: 4px;
}

.skill-total-badge {
	font-weight: 800;
	font-size: 0.95rem;
	color: #ffd700;
	background: rgba(0, 0, 0, 0.45);
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid rgba(255, 215, 0, 0.25);
	min-width: 28px;
	text-align: center;
}

/* Abilities & Spell Cards */
.rhaokar-fu-spell-view-card,
.rhaokar-fu-equip-view-box,
.rhaokar-ik-ability-view-card {
	background: linear-gradient(180deg, #14181f 0%, #0d1015 100%);
	border: 1px solid #334155;
	border-radius: 8px;
	padding: 14px;
	height: 100%;
}

/* ==========================================================================
   23. STARFINDER RPG & ARQUIVO DE FICHAS - ESTILOS SCI-FI & SISTEMAS ALTERNATIVOS
   ========================================================================== */
.rhaokar-sf-builder-wrap {
	background: #06090e;
	color: #d0e6f8;
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	border: 1px solid #14283b;
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 10px 40px rgba(0, 240, 255, 0.08);
}
.rhaokar-sf-header {
	border-bottom: 2px solid #00f0ff;
	padding-bottom: 16px;
	margin-bottom: 24px;
	position: relative;
}
.rhaokar-sf-header::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 120px;
	height: 3px;
	background: #ff007f;
	box-shadow: 0 0 12px #ff007f;
}
.rhaokar-sf-title {
	font-family: 'Cinzel', 'Segoe UI', Georgia, serif;
	color: #00f0ff;
	font-size: 1.8rem;
	font-weight: 800;
	text-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
	margin: 0;
}
.rhaokar-sf-subtitle {
	color: #7b99b5;
	font-size: 0.92rem;
	margin-top: 4px;
}

/* Starfinder Vital Gauges */
.rhaokar-sf-gauges-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}
@media (max-width: 768px) {
	.rhaokar-sf-gauges-row {
		grid-template-columns: 1fr;
	}
}
.rhaokar-sf-gauge-card {
	background: linear-gradient(180deg, #0d1724 0%, #080d15 100%);
	border: 1px solid #1a334d;
	border-radius: 8px;
	padding: 16px;
	position: relative;
	overflow: hidden;
}
.rhaokar-sf-gauge-card.sp-gauge { border-top: 3px solid #00f0ff; }
.rhaokar-sf-gauge-card.hp-gauge { border-top: 3px solid #00e676; }
.rhaokar-sf-gauge-card.rp-gauge { border-top: 3px solid #ff007f; }

.rhaokar-sf-gauge-title {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sp-gauge .rhaokar-sf-gauge-title { color: #00f0ff; }
.hp-gauge .rhaokar-sf-gauge-title { color: #00e676; }
.rp-gauge .rhaokar-sf-gauge-title { color: #ff007f; }

.rhaokar-sf-gauge-vals {
	display: flex;
	align-items: center;
	gap: 8px;
}
.rhaokar-sf-gauge-input {
	background: #06090e;
	border: 1px solid #1c3652;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 800;
	text-align: center;
	border-radius: 6px;
	padding: 6px 8px;
	width: 80px;
}
.rhaokar-sf-gauge-divider {
	color: #55728e;
	font-size: 1.3rem;
	font-weight: 300;
}

/* Shield Quadrant Diagram (Starships) */
.rhaokar-sf-shield-diagram {
	background: #070e17;
	border: 1px solid #19344d;
	border-radius: 12px;
	padding: 20px;
	max-width: 480px;
	margin: 0 auto 20px auto;
	box-shadow: inset 0 0 25px rgba(0, 240, 255, 0.05);
}
.rhaokar-sf-shield-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 12px;
	align-items: center;
}
.rhaokar-sf-shield-quadrant {
	background: #0d1b2a;
	border: 1px solid #00f0ff;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}
.rhaokar-sf-shield-label {
	font-size: 0.72rem;
	font-weight: 800;
	color: #00f0ff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.rhaokar-sf-hull-core {
	background: #121f2d;
	border: 2px solid #ffaa00;
	border-radius: 10px;
	padding: 12px;
	text-align: center;
	box-shadow: 0 0 14px rgba(255, 170, 0, 0.2);
}
.rhaokar-sf-hull-core .core-title {
	color: #ffaa00;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
}

/* Starship & Vehicle Repeater Cards */
.rhaokar-sf-starship-card,
.rhaokar-sf-vehicle-card {
	background: #09111b;
	border: 1px solid #1a334d;
	border-left: 4px solid #00f0ff;
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 20px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.4);
	position: relative;
}
.rhaokar-sf-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #1a334d;
	padding-bottom: 12px;
	margin-bottom: 16px;
}
.rhaokar-sf-card-title {
	font-family: 'Cinzel', 'Segoe UI', serif;
	color: #00f0ff;
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.rhaokar-sf-card-remove-btn {
	background: rgba(255, 23, 68, 0.15);
	border: 1px solid #ff1744;
	color: #ff5252;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 5px 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.rhaokar-sf-card-remove-btn:hover {
	background: #ff1744;
	color: #fff;
	box-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
}

/* Cybernetics & Augmentations */
.sf-cybernetics-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}
.sf-cybernetics-table th {
	background: #0b1522;
	color: #00f0ff;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 8px 10px;
	border: 1px solid #1c3652;
}
.sf-cybernetics-table td {
	padding: 8px 10px;
	border: 1px solid #162a3f;
	background: #070d15;
}

/* Bulk Progress Indicators */
.sf-bulk-wrapper {
	background: #080f18;
	border: 1px solid #172d42;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
}
.sf-bulk-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.76rem;
	font-weight: 800;
	text-transform: uppercase;
}
.sf-bulk-status-unencumbered {
	background: rgba(0, 230, 118, 0.15);
	color: #00e676;
	border: 1px solid rgba(0, 230, 118, 0.4);
}
.sf-bulk-status-encumbered {
	background: rgba(255, 170, 0, 0.15);
	color: #ffaa00;
	border: 1px solid rgba(255, 170, 0, 0.4);
}
.sf-bulk-status-overburdened {
	background: rgba(255, 23, 68, 0.2);
	color: #ff1744;
	border: 1px solid rgba(255, 23, 68, 0.5);
}

/* ==========================================================================
   IRON KINGDOMS: OFFICIAL DAMAGE CAPACITY & LIFE SPIRAL (ESPIRAL DE VIDA)
   ========================================================================== */

.rhaokar-ik-damage-capacity-wrapper {
	background: radial-gradient(circle at 50% 20%, #151d26 0%, #0a0d12 100%);
	border: 2px solid #78350f;
	border-radius: 12px;
	padding: 24px 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(245, 158, 11, 0.2);
	position: relative;
	color: #e2e8f0;
	margin-top: 15px;
	margin-bottom: 25px;
}

.ik-damage-capacity-header {
	border-bottom: 2px solid rgba(120, 53, 15, 0.5);
	padding-bottom: 14px;
	margin-bottom: 20px;
}

.damage-capacity-title {
	font-family: 'Cinzel', 'Georgia', serif;
	color: #fbbf24;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 1px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 12px rgba(245, 158, 11, 0.3);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ik-damage-capacity-body {
	display: grid;
	grid-template-columns: 280px 1fr 240px;
	gap: 20px;
	align-items: center;
}

@media (max-width: 1200px) {
	.ik-damage-capacity-body {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Aspect Penalties Panel (Left Side) */
.ik-aspect-penalties-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ik-aspect-penalty-card {
	background: #0f141c;
	border: 1px solid #1e293b;
	border-left: 5px solid #64748b;
	border-radius: 8px;
	padding: 12px 14px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease;
	position: relative;
}

.ik-aspect-penalty-card.phy {
	border-left-color: #0284c7;
}

.ik-aspect-penalty-card.agl {
	border-left-color: #dc2626;
}

.ik-aspect-penalty-card.int {
	border-left-color: #16a34a;
}

.aspect-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.aspect-badge {
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 4px;
}

.aspect-badge.phy {
	background: rgba(2, 132, 199, 0.2);
	color: #38bdf8;
	border: 1px solid rgba(2, 132, 199, 0.5);
}

.aspect-badge.agl {
	background: rgba(220, 38, 38, 0.2);
	color: #f87171;
	border: 1px solid rgba(220, 38, 38, 0.5);
}

.aspect-badge.int {
	background: rgba(22, 163, 74, 0.2);
	color: #4ade80;
	border: 1px solid rgba(22, 163, 74, 0.5);
}

.aspect-counter {
	font-size: 0.82rem;
	color: #94a3b8;
	font-weight: 700;
}

.aspect-counter strong {
	color: #fbbf24;
	font-size: 0.95rem;
}

.aspect-crippled-rule {
	font-size: 0.74rem;
	line-height: 1.35;
	color: #94a3b8;
}

.aspect-crippled-rule .rule-title {
	font-weight: 800;
	display: block;
	margin-bottom: 2px;
	color: #cbd5e1;
}

.aspect-crippled-rule .rule-text {
	margin: 0;
}

/* Crippled State Alert Animation */
.ik-aspect-penalty-card.is-crippled {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, #170707 100%) !important;
	border-color: #ef4444 !important;
	border-left-color: #ef4444 !important;
	box-shadow: 0 0 16px rgba(239, 68, 68, 0.6), inset 0 0 10px rgba(220, 38, 38, 0.3) !important;
	animation: ik-crippled-pulse 2s infinite ease-in-out;
}

.ik-aspect-penalty-card.is-crippled .aspect-counter strong {
	color: #ef4444 !important;
}

.ik-aspect-penalty-card.is-crippled .rule-title {
	color: #ef4444 !important;
	font-weight: 900;
}

.ik-aspect-penalty-card.is-crippled .rule-text {
	color: #fecaca !important;
}

@keyframes ik-crippled-pulse {
	0%, 100% {
		border-color: #ef4444;
		box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
	}
	50% {
		border-color: #f87171;
		box-shadow: 0 0 22px rgba(248, 113, 113, 0.85);
	}
}

/* Center Column: SVG Wheel */
.ik-spiral-svg-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	max-width: 490px;
	margin: 0 auto;
}

.ik-life-spiral-svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.7));
	user-select: none;
}

/* SVG Interactive Nodes */
.ik-spiral-node {
	transition: transform 0.15s ease, filter 0.15s ease;
	outline: none;
}

.ik-spiral-node.is-active {
	cursor: pointer;
}

.ik-spiral-node.is-active:hover {
	filter: brightness(1.35) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.ik-spiral-node.is-active:focus-visible circle.node-base {
	stroke: #fef08a !important;
	stroke-width: 3.5px !important;
}

.ik-spiral-node.is-locked {
	cursor: not-allowed;
	opacity: 0.75;
}

.ik-spiral-node.is-locked .node-base {
	fill: #09090b !important;
	stroke: #27272a !important;
}

.ik-spiral-node.is-locked .node-idx {
	display: none;
}

.ik-spiral-node.is-marked .node-base {
	fill: rgba(220, 38, 38, 0.3) !important;
	stroke: #ef4444 !important;
}

.ik-spiral-node.is-marked .node-idx {
	opacity: 0.3;
}

/* Right Side: Power Field Panel */
.ik-power-field-panel {
	background: #0d141e;
	border: 1px solid #1e3a5f;
	border-radius: 8px;
	padding: 16px 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	text-align: center;
}

.power-field-header h4 {
	font-family: 'Cinzel', 'Georgia', serif;
	color: #38bdf8;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.8px;
	margin-bottom: 2px;
}

.power-field-desc {
	font-size: 0.72rem;
	color: #94a3b8;
	line-height: 1.35;
	margin-top: 6px;
	margin-bottom: 12px;
}

.power-field-boxes-track {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.ik-pf-box {
	width: 32px;
	height: 38px;
	background: rgba(14, 165, 233, 0.1);
	border: 2px solid #0284c7;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition: all 0.2s ease;
	user-select: none;
}

.ik-pf-box .pf-num {
	font-size: 0.72rem;
	font-weight: 800;
	color: #7dd3fc;
	line-height: 1;
}

.ik-pf-box .pf-mark {
	font-size: 1.1rem;
	font-weight: 900;
	line-height: 1;
	color: transparent;
	margin-top: -2px;
}

.ik-pf-box:hover {
	border-color: #38bdf8;
	background: rgba(14, 165, 233, 0.2);
}

.ik-pf-box.is-marked {
	background: rgba(220, 38, 38, 0.35) !important;
	border-color: #ef4444 !important;
	box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

.ik-pf-box.is-marked .pf-mark {
	color: #ef4444 !important;
}

.ik-pf-box.is-marked .pf-num {
	color: #fca5a5;
}

.ik-spiral-quick-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ==========================================================================
   IRON KINGDOMS: TWO-LINE WEAPONS TABLE LAYOUT (DESKTOP & MOBILE-FIRST)
   ========================================================================== */

.rhaokar-table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ik-weapons-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
	margin-bottom: 1.25rem;
}

.ik-weapons-table th {
	background: #141c26 !important;
	color: #fbbf24 !important;
	font-size: 0.82rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 10px 14px;
	border: 1px solid #78350f !important;
	border-bottom: 2px solid #b45309 !important;
}

.ik-weapon-row-main td {
	background: #0f141c !important;
	border-top: 1px solid #1e293b !important;
	border-bottom: none !important;
	border-left: 1px solid #1e293b !important;
	border-right: 1px solid #1e293b !important;
	padding: 10px 14px 6px 14px;
	vertical-align: middle;
	transition: background 0.2s ease;
}

.ik-weapon-row-sub td {
	background: #090d13 !important;
	border-bottom: 2px solid rgba(120, 53, 15, 0.45) !important;
	border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
	border-left: 1px solid #1e293b !important;
	border-right: 1px solid #1e293b !important;
	padding: 6px 14px 10px 14px;
	color: #cbd5e1;
	transition: background 0.2s ease;
}

.ik-weapons-table tbody:hover .ik-weapon-row-main td,
.ik-weapons-table tbody:hover .ik-weapon-row-sub td,
.ik-weapon-row-main:hover td,
.ik-weapon-row-main:hover + .ik-weapon-row-sub td {
	background: #151d28 !important;
}

.ik-weapon-rules-cell {
	line-height: 1.45;
	word-break: break-word;
	white-space: normal;
}

/* -------------------------------------------------------------
   MOBILE RESPONSIVE WEAPON CARDS (TELAS <= 768px)
   Elimina estouro horizontal e transforma cada arma em card fluído
   ------------------------------------------------------------- */
@media (max-width: 768px) {
	.ik-weapons-table {
		display: block !important;
		width: 100% !important;
		border-spacing: 0 !important;
		border: none !important;
	}

	.ik-weapons-table thead {
		display: none !important; /* Esconde cabeçalho tabular que quebra em telas estreitas */
	}

	.ik-weapons-table tbody {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		width: 100% !important;
	}

	.ik-weapons-table tbody tr.ik-weapon-row-main {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		background: #111822 !important;
		border: 1px solid #78350f !important;
		border-bottom: 1px dashed rgba(245, 158, 11, 0.25) !important;
		border-radius: 10px 10px 0 0 !important;
		padding: 12px 14px !important;
		gap: 8px !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}

	.ik-weapons-table tbody tr.ik-weapon-row-main td.ik-weapon-cell-name {
		width: 100% !important;
		display: block !important;
		border: none !important;
		padding: 0 0 6px 0 !important;
		background: transparent !important;
		font-size: 1.05rem !important;
		line-height: 1.3 !important;
		word-break: break-word !important;
	}

	.ik-weapons-table tbody tr.ik-weapon-row-main td:not(.ik-weapon-cell-name) {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 1 1 calc(25% - 8px) !important;
		min-width: 60px !important;
		background: rgba(15, 23, 42, 0.75) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		border-radius: 6px !important;
		padding: 6px 4px !important;
		font-size: 0.88rem !important;
		box-sizing: border-box !important;
	}

	.ik-weapons-table tbody tr.ik-weapon-row-main td:not(.ik-weapon-cell-name)::before {
		content: attr(data-label) ": ";
		font-size: 0.7rem !important;
		color: #94a3b8 !important;
		font-weight: 800 !important;
		margin-right: 4px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
	}

	.ik-weapons-table tbody tr.ik-weapon-row-sub {
		display: block !important;
		width: 100% !important;
		background: #090d13 !important;
		border: 1px solid #78350f !important;
		border-top: none !important;
		border-radius: 0 0 10px 10px !important;
		box-sizing: border-box !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
		margin-bottom: 6px !important;
	}

	.ik-weapons-table tbody tr.ik-weapon-row-sub td.ik-weapon-rules-cell {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 10px 14px 12px 14px !important;
		border: none !important;
		background: transparent !important;
		font-size: 0.88rem !important;
		line-height: 1.5 !important;
		word-break: break-word !important;
		white-space: normal !important;
	}
}