/* GENERIC ELEMENTS */
:root {
	--bg1: #FFF1;
	--bg2: #FFF2;
	--text: #FFF;
	--status-offline: #FFF2;
	--status-online: #4F4;
	--status-afk: #F84;
	--error: #F44;
	--compact-transition-duration: 0.2s;
}

.button{
	accord
	
}

.panel {
  background: linear-gradient(
    to bottom,
    rgba(40, 90, 180, 0.85),
    rgba(30, 70, 150, 0.85)
  );
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

a {
	color: inherit;
}

.minecraft-font {
    font-family: 'Minecraftia', sans-serif;
    letter-spacing: 1px;
}
/* Le conteneur prend toute la largeur du bouton */
.progress-container {
    position: relative;
    width: 100%;
    margin-top: 8px;
}

.progress-bar {
    width: 100%;
    height: 18px; /* plus épais */
    background: #2b2b2b;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 2px solid #000;
	box-shadow: inset 0 2px 0 #555;
}

.progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: normal;
    justify-content: center;
    font-family: 'Minecraftia', sans-serif;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 2px 2px #000;
    pointer-events: none;
}

/* Le remplissage animé */
.progress-fill {
  height: 100%;
  width: 0%;
  background:
    repeating-linear-gradient(
      to right,
      rgba(0,0,0,0.35) 0px,
      rgba(0,0,0,0.35) 2px,
      transparent 2px,
      transparent 38px
    ),
    linear-gradient(
      to bottom,
      #7CFF00 0%,
      #5AD600 45%,
      #3FA800 55%,
      #2F7E00 100%
    );
  transition: width 2s ease-out;
}

@keyframes xpMove {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

@keyframes xpMove {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
  100% { filter: brightness(1); }
}

.webstats-tableheading {
	margin-top: 20px;
	font-size: 1.5em;
	font-weight: bold;
}

.webstats-tableheading > .webstats-pagination {
	margin-left: 50px;
}
.webstats-tableheading > .webstats-pagination * {
	margin-right: 3px;
}
.webstats-pagination.pagination-hidden {
	display: none;
}

.webstats-error-message {
	color: var(--error);
}

table {
	--row-height: 50px;
	--gap: 2px;
	border-spacing: var(--gap);
}

html.compact table {
	--row-height: 32px;
}

html.hide-offline tr.offline {
	display: none;
}

tr.current-player td:not(.empty) {
	background: var(--bg2);
	font-weight: bold;
}

td:not(.empty) {
	position: relative;
	height: var(--row-height);
	padding: 0px 20px;
	background: var(--bg1);
	text-align: right;
	white-space: nowrap;
	transition: height var(--compact-transition-duration), padding var(--compact-transition-duration);
}

td:not(.empty)[data-objective=Player] {
	text-align: left;
	padding-left: 40px;
}

td:not(.empty)[data-objective=Player][title="#server"] {
	padding-left: 20px;
}

td:not(.empty)::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: var(--relative);
	height: 100%;
	background: var(--bg2);
	z-index: -1;
}

td.skin, html.scroll-playernames td[data-objective=Player], html.scroll-playernames th[data-objective=Player] {
	position: sticky !important;
	z-index: 10;
}

html.scroll-playernames th[data-objective=Player] {
	left: 0;
	backdrop-filter: blur(5px);
}

html.scroll-playernames td[data-objective=Player] {
	left: calc(var(--row-height) + var(--gap));
	backdrop-filter: blur(5px);
	transition:
		height var(--compact-transition-duration),
		padding var(--compact-transition-duration),
		left var(--compact-transition-duration);
}

td.skin {
	left: 0;
	padding: 0px !important;
	background: transparent;
}

td.skin img {
	width: var(--row-height);
	-ms-interpolation-mode: nearest-neighbor;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-pixelated;
		image-rendering: pixelated;
	display: block;
	transition: width var(--compact-transition-duration);
}

td.skin[title="#server"] {
	/* "Console" image */
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAPElEQVQ4T2NUUlL6z0ABYBw1gGE0DBioHAZ3795lUFZWJildosQCRQaQoxnkVLgL0A2A8dFpdP8NfEICAMkiK2HeQ9JUAAAAAElFTkSuQmCC");
	background-size: cover;
	image-rendering: pixelated;
}

html.compact td:not(.empty){
	padding: 0px 10px;
}

html.compact td:not(.empty)[data-objective=Player]{
	padding-left: var(--row-height);
}

html.compact td:not(.empty)[data-objective=Player][title="#server"] {
	padding-left: 10px;
}

th {
	padding: 10px 20px;
	background: var(--bg2);
	cursor: pointer;
	transition: padding var(--compact-transition-duration);
}

html.compact th{
	padding: 5px 10px;
}

th.webstats-sort-column {
	position: relative;
}

th.webstats-sort-column::after {
	position: absolute;
	top: 10px;
	right: 10px;
	transition: top var(--compact-transition-duration), right var(--compact-transition-duration);
}

th.webstats-sort-column.ascending::after {
	content: "↑";
}

th.webstats-sort-column.descending::after {
	content: "↓";
}

html.compact th.webstats-sort-column::after {
	top: 5px;
	right: 5px;
}

.status {
	position: absolute;
	top: calc(50% - 5px);
	left: 15px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: var(--status-offline);
	transition: top var(--compact-transition-duration), left var(--compact-transition-duration);
}

html.compact .status {
	left: 11px;
}

td[title="#server"] .status {
	display: none;
}

.status.online {
	background: var(--status-online);
}

.status.afk {
	background: var(--status-afk);
}

.mc-format.mc-black { color: #000000 }
.mc-format.mc-dark_blue { color: #0000AA }
.mc-format.mc-dark_green { color: #00AA00 }
.mc-format.mc-dark_aqua { color: #00AAAA }
.mc-format.mc-dark_red { color: #AA0000 }
.mc-format.mc-dark_purple { color: #AA00AA }
.mc-format.mc-gold { color: #FFAA00 }
.mc-format.mc-gray { color: #AAAAAA }
.mc-format.mc-dark_gray { color: #555555 }
.mc-format.mc-blue { color: #5555FF }
.mc-format.mc-green { color: #55FF55 }
.mc-format.mc-aqua { color: #55FFFF }
.mc-format.mc-red { color: #FF5555 }
.mc-format.mc-light_purple { color: #FF55FF }
.mc-format.mc-yellow { color: #FFFF55 }
.mc-format.mc-white { color: #FFFFFF }

.mc-format.mc-obfuscated { /* no style */ }
.mc-format.mc-bold { font-weight: bold }
.mc-format.mc-strikethrough { text-decoration: line-through }
.mc-format.mc-underline { text-decoration: underline }
.mc-format.mc-italic { font-style: italic }
.mc-format.mc-reset { /* no style */ }

/* POSITIONAL ELEMENTS */


body {
	    max-width: 100%;
	    overflow-x: hidden;
        font-family: 'Aubrey', cursive;
        background: url('background_brown.png') no-repeat center center fixed;
        background-size: cover;
        color: #fff;
        color: #333;
        margin: 0;
        padding: 0;
    }

header {
        color: white;
        text-align: center;
        padding: 1.5rem;
    }

    h1 {
        margin: 0;
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    h2 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: #1e3a8a;
        border-left: 5px solid #3b82f6;
        padding-left: 0.5rem;
    }

main > span {
	margin-right: 10px;
}

/* MEDIA DIRECTIVES */
@media (prefers-color-scheme: dark) {
	:root {
		--bg1: #0003;
		--bg2: #0005;
		--text: #DDD;
	}
}

main {
    margin: 2rem auto;
    padding: 0 1rem;
}

@media screen and (max-width: 700px) {
	main {
		width: 90%;
		align-content:center;
		margin: 2rem auto;
	}
}

* --- ACCORDION --- */

.accordion {
  margin-bottom: 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  background: white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.accordion-header {
  background: #0000008a;
  width: 100%;
  font-family: 'Aubrey', cursive;
  color: white;
  border: none;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 260px 1fr 30px;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  gap: 12px;
  letter-spacing: 1px;
  border-radius: 10px;
  margin-top: 7px;
	
  appearance: none;
  -webkit-appearance: none;
}

.accordion-header span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.accordion-score {
  font-weight: 400;
  font-size: 0.95rem;
  opacity: 0.9;
}

.accordion-icon {
  transition: transform 0.3s ease;
  font-size: 1.2rem;
  text-align: center;
}

.accordion.open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  overflow: hidden;
  height: 0;
}

.accordion-content > * {
  padding: 1rem;
}

/* Mobile */
@media (max-width: 600px) {
    .boss-card {
        flex-direction: column;
        text-align: center;
    }

  .accordion-score {
    font-size: 0.9rem;
  }
	
	.accordion-header {
	    grid-template-columns: 1fr 30px;
	    grid-template-rows: auto auto;
	    grid-template-areas:
	      "title icon"
	      "xp    icon";
	  }
	
	  .quest-title {
	    grid-area: title;
	    white-space: normal;
	  }
	
	  .xp-container {
	    grid-area: xp;
	  }
	
	  .accordion-icon {
	    grid-area: icon;
	    align-self: center;
	  }

}

/* --- Boss Section --- */
.boss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.boss-card {
    background: linear-gradient(271deg, #e2c160c4, #ffffff73);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
	max-width: 100%;
    transition: transform 0.2s ease, background 0.3s ease;
	box-sizing: border-box;
}

.boss-card:hover {
    transform: scale(1.03);
}

.boss-card img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
}

.boss-info {
    flex: 1;
    text-align: left;
}

.boss-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: #111827;
}

.boss-points {
    color: #16a34a;
    font-weight: 500;
    margin-top: 0.2rem;
}

.boss-first {
    margin-top: 0.3rem;
    font-size: 0.9rem;
    color: #555;
}

.killed {
    opacity: 0.7;
    background: #e59999;
}
	
    .boss-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }

  .boss-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
  }

  .boss-points {
    font-weight: 600;
    color: var(--green);
    margin-bottom: 0.25rem;
  }

  .boss-first {
    font-size: 0.9rem;
    color: var(--muted);
  }

  /* tué : aspect final */
  .boss-card.killed .boss-avatar {
	width: 72px;
    height: 72px;
    max-width: 100%;
    flex-shrink: 0;
    /*opacity: 0.7;*/
  }

  .boss-card.killed .boss-name,
  .boss-card.killed .boss-points {
    color: var(--danger);
  }
    
    .boss-card img {
        width: 70px;
        height: 70px;
    }

    /* --- Succès Section --- */
    .success-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
    }

    .success {
        background: #fff;
        border-left: 5px solid #b91010;
        border-radius: 10px;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }

    .success-title {
        font-weight: bold;
        color: #064e3b;
    }

	.success.accomplished { 
		border-left: 5px solid #1dbf3a !important; 
	}

    .success-player {
        font-size: 0.9rem;
        color: #374151;
        margin-top: 0.25rem;
    }

    /* --- Joueurs Section --- */
    .player-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .player-card {
        background: white;
        border-radius: 10px;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .player-name {
        font-weight: bold;
        font-size: 1.1rem;
        color: #1e3a8a;
        margin-bottom: 0.5rem;
    }

    .player-stats {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .player-stats span {
        display: block;
    }

    @media(max-width: 600px) {
	        h1 { font-size: 1.4rem; }
	        h2 { font-size: 1.1rem; }
	         }
	     .boss-card {
	      flex-direction: row;
	      align-items: flex-start;
	      padding: 0.8rem;
	      gap: 0.8rem;
	    }
	    .boss-avatar {
	      width: 72px;
	      height: 72px;
	    }
	    .boss-name {
	      font-size: 1rem;
	    }
	}