/* =====================================
   Weapon Calculator
   ===================================== */

#weapon-calculator 
{
    width:100%;
    max-width:1400px;

    margin:30px auto;
    padding:30px;

    border:2px solid #444;
    border-radius:12px;

    background:#111;
    color:#eee;

    box-sizing:border-box;
}


/* Header */

.weapon-header 
{
    text-align:center;

    margin-bottom:20px;
}


/* Deux armes */

.weapon-main-container
{
	display:grid;

	grid-template-columns:
	repeat(2,minmax(350px,1fr));

	gap:30px;
}


.weapon-container 
{
    display:flex;

    gap:20px;

    justify-content:center;
}


.weapon-column 
{
    flex:1;

    min-width:300px;
}
.weapon-column,
#weapon-left,
#weapon-right
{
	min-height:650px;
}

#weapon-left,
#weapon-right
{
	display:flex;

	flex-direction:column;

	gap:20px;
}
/* Composants */

.weapon-components
{
    display:flex;

    flex-direction:column;

    gap:15px;
}


.weapon-component-row
{
	display:flex;

	align-items:center;

	gap:15px;

	margin-bottom:15px;
}


.weapon-component-row .weapon-selector
{
	flex:1;
}



/* Cadres */

.weapon-box
{
	border:2px solid #555;

	border-radius:12px;

	padding:25px;

	background:#1b1b1b;

	box-sizing:border-box;

	height:auto;
}


.weapon-box h3
{
	font-size:1.5rem;

	margin-bottom:20px;
}



/* Sélections */

.weapon-selection-box select 
{
    width:100%;

    margin-bottom:10px;

    padding:8px;

    background:#111;

    color:#eee;

    border:1px solid #555;

    border-radius:6px;
}


.weapon-selector
{
	flex:1;
}


.weapon-selector label
{
	display:block;

	font-size:1.1rem;

	margin-bottom:5px;
}


.weapon-selector select
{
	width:100%;

	padding:10px;

	font-size:1rem;
}



/* Résultats */

.weapon-result-box 
{
    background:#161616;
}



.weapon-stat 
{
    display:flex;

    justify-content:space-between;

    padding:6px;

    border-bottom:1px solid #333;
}



/* Tags dégâts / magie */

.weapon-tags
{
	display:flex;

	flex-wrap:wrap;

	gap:8px;

	margin-bottom:15px;
}


.weapon-tag
{
	padding:5px 10px;

	border:1px solid #555;

	border-radius:8px;

	background:#222;

	color:#eee;

	font-weight:bold;

	font-size:0.9rem;
}



/* Comparaison couleurs */

.compare-better 
{
    color:#45d65c;

    font-weight:bold;
}


.compare-equal 
{
    color:#e5a832;

    font-weight:bold;
}


.compare-worse 
{
    color:#e05252;

    font-weight:bold;
}



/* Responsive */

@media(max-width:800px)
{
	.weapon-main-container
	{
		grid-template-columns:1fr;
	}


	.weapon-component-row
	{
		flex-direction:column;

		align-items:stretch;
	}
}