/* global styles */
* {box-sizing: border-box; margin: 0; padding: 0;}
body {background-color: var(--color-black); color: var(--color-white);}
.base {min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 4%;}
.img {max-width: 700px; width: 100%;}
img {width: 300px; margin-bottom: 15px;}
h1 {font-size: 24px;}
h2 {color: var(--color-blueWhite); font-size: 18px; font-weight: 600;}
.hidden {display: none !important;}

/* global project variables */
:root {
  --color-card: #2C2C2C;
  --color-green: #22C55E;
  --color-red: #EF4444;
  --color-black: #1E1E1E;
  --color-periwinkle: #CBD5F5;
  --color-white: #E5E5E5;
  --radius: 12px; 
  --transition: 0.25s ease;
}

/* style character select */
.character-select {background-color: var(--color-card); border-radius: var(--radius); max-width: 500px; padding: 40px; width: 100%; max-width: 700px;}
.select-group {display: flex; flex-direction: column; margin-top: 40px;}
.select-group h2 {margin-bottom: 10px;}
.select-group select {background-color: var(--color-black); border-radius: var(--radius); border: 1px solid var(--color-black); color: var(--color-blueWhite); font-size: 14px; padding: 12px 16px; appearance: none; cursor: pointer;}
.select-group select:focus {outline: none;}
#start-battle {background-color: var(--color-green); border-radius: var(--radius); color: var(--color-white); transition: var(--transition); font-size: 14px; padding: 20px; width: 100%; cursor: pointer; border: none; font-weight: 600; margin-top: 10px;}
#start-battle:hover {opacity: 0.85; transform: translateY(-2px);} 

/* style game */
.game {width: 100%; max-width: 700px;}

.button-back {padding: 15px 30px; margin-bottom: 15px; font-size: 14px; font-weight: 600; background-color: var(--color-card); color: var(--color-white); transition: var(--transition); border: none; border-radius: 10px; cursor: pointer;}
.button-back:hover {opacity: 0.85; transform: translateY(-2px);}
.button-attack:disabled {opacity: 0.4; cursor: not-allowed;}

.arena {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}

.fighter {background-color: var(--color-card); border-radius: var(--radius); border: 1px solid; padding: 30px; display: flex; flex-direction: column; gap: 20px;}
.fighter-health {width: 100%;}
.health-bar {width: 100%; height: 20px; background-color: var(--color-black); border-radius: 8px; overflow: hidden;}
.health-bar--fill {width: 100%; height: 100%; transition: var(--transition)}
.button-attack {width: 50%; padding: 15px; font-size: 15px; font-weight: 600; color: #E5E5E5; border: none; border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition), transform var(--transition);}
.button-attack:hover {opacity: 0.6; transform: translateY(-2px);}
.button-attack:active {transform: translateY(0);}

.fighter--player {border-color: var(--color-green); text-align: end;}
.fighter--player .health-bar--fill {background: linear-gradient(90deg, #4caf50, #8bc34a);}
.fighter--player .button-attack {background-color: var(--color-green); display: flex; align-self: flex-end; justify-content: end;}

.fighter--enemy {border-color: var(--color-red);}
.fighter--enemy .health-bar--fill {background: linear-gradient(90deg, #8bc34a, #4caf50);}
.fighter--enemy .button-attack {background-color: var(--color-red); text-align: start;}

.battle-log {display: flex; flex-direction: column; height: 200px; grid-column: span 2; padding: 25px; border-radius: var(--radius); background-color: var(--color-card);}
.battle-log--title {font-size: 18px; margin-bottom: 15px;}
.battle-log--list {list-style: none; display: flex; flex-direction: column; gap: 5px; max-height: 140px; overflow-y: auto;}
.battle-log--list li {font-size: 14px; color: #CBD5F5;}

@media (max-width: 768px) {
  .arena {grid-template-columns: 1fr;}
  .battle-log {grid-column: span 1;}
  .fighter--player .button-attack {background-color: var(--color-green); align-self: self-start; justify-content: center;}
  .fighter--enemy .button-attack {text-align: center;}
}