@import url(https://fonts.googleapis.com/css2?family=Iceberg&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Audiowide&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lilita+One&display=swap);

body,
html {
  cursor: url('/static/cursor/base.cur'), auto !important;
}

#viewer,
#viewer * {
  cursor: url('/static/cursor/move.cur'), move !important;
}

.play-button,
a,
button,
input[type=submit],
#helpBtn,
#nextBtn,
#quitBtn,
.suggestion-item,
.potion-slot,
.life,
#potions-bar {
  cursor: url('/static/cursor/select.cur'), pointer !important;
}

input,
textarea,
#guessInput {
  cursor: url('/static/cursor/text.cur'), text !important;
}

::selection {
  cursor: url('/static/cursor/select.cur'), default;
}

#viewer,
body,
html {
  width: 100vw;
  height: 100vh
}

#guessBtn,
#guessInput,
#nextBtn {
  box-shadow: 0 0 8px rgba(0, 0, 0, .5)
}

#gameInfo,
#timer-number {
  top: 50%;
  transform: translate(-50%, -50%)
}

#gameInfo,
#nextBtn,
#timer,
#timer-progress-container {
  display: none
}

#guessContainer,
#nextBtn,
#viewer {
  position: relative
}

.fade,
.fade-out {
  opacity: 0
}

#gameName,
#guessInput {
  text-transform: uppercase;
  color: #fff
}

#overlay,
#score-bar-container {
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px
}

#gameInfo,
#guessInput,
#message,
#nextBtn,
#score-bar-score {
  text-align: center
}

#helpBtn,
#score-bar {
  background: linear-gradient(90deg, #38bdf8, #7b2cbf)
}

body,
html {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  overflow: hidden
}

#viewer {
  opacity: 1;
  transition: opacity .8s ease-in-out
}

#overlay {
  position: absolute;
  bottom: 20px;
  width: 90vw;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10
}

#guessContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-direction: column-reverse
}

#guessInput {
  font-size: 20px;
  padding: 8px;
  flex-grow: 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .5);
  outline: 0;
  background: rgba(0, 0, 0, .9)
}

@keyframes errorGlowFade {
  from {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, .3), 0 0 8px rgba(0, 0, 0, .5);
    border-color: #f33
  }

  to {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0), 0 0 8px rgba(0, 0, 0, .5);
    border-color: rgba(255, 255, 255, .5)
  }
}

#guessInput.error-glow {
  box-shadow: 0 0 0 4px rgba(255, 0, 0, .3), 0 0 8px rgba(0, 0, 0, .5);
  border-color: #f33;
  animation: 1.5s forwards errorGlowFade;
  transition: box-shadow .6s, border-color .6s
}

#guessBtn,
#nextBtn {
  font-size: 1.2rem;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  border: none;
  background-color: #28a745;
  color: #fff;
  transition: background-color .3s
}

#gameInfo,
.life {
  border-radius: 0;
  background: 0 0
}

#helpBtn,
#nextBtn,
#quitBtn {
  cursor: pointer;
  outline: 0;
  transition: background .3s, transform .2s, box-shadow .3s
}

#guessBtn:hover:not(:disabled),
#nextBtn:hover {
  background-color: #218838
}

#guessBtn:disabled {
  background-color: gray;
  cursor: not-allowed
}

#lives {
  display: flex;
  justify-content: center
}

.life {
  width: 40px;
  height: 40px;
  box-shadow: none;
  transition: none;
  object-fit: contain;
  margin: 0 2px
}

.life.lost {
  background: gray
}

#message {
  font-size: 1.2rem;
  min-height: 24px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .8)
}

#timer-circle-container {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center
}

#timer-svg {
  position: absolute;
  top: 0;
  left: 0
}

#timer-bg {
  stroke: #444;
  opacity: .5
}

#timer-progress-circle {
  transition: stroke-dashoffset 1s linear;
  transform: rotate(-90deg);
  transform-origin: 50% 50%
}

#timer-number {
  position: absolute;
  left: 50%;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  font-family: Orbitron, Arial, sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
}

#gameInfo {
  position: fixed;
  width: 90%;
  left: 50%;
  padding: 0;
  max-width: none;
  z-index: 20
}

#gameCover {
  width: 250px;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 0 18px rgba(56, 189, 248, .7), 0 0 8px rgba(236, 72, 153, .8)
}

#gameDetails {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 32px;
  font-weight: 700;
  text-shadow: 0 2px 8px #000
}

#nextBtn {
  font-size: 2.5rem;
  font-weight: 600;
  padding: .7em 2.5em;
  border-radius: 2em;
  border: none;
  background: linear-gradient(90deg, #632eb9, #7b2cbf);
  color: #fff;
  text-shadow: 0 2px 8px #7b2cbf, 0 0 4px #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, .7), 0 0 8px rgba(236, 72, 153, .8);
  margin-top: 24px;
  user-select: none;
  will-change: transform, opacity;
  z-index: 2
}

#quitBtn,
#roundNumber {
  top: 24px;
  z-index: 30;
  background: rgba(0, 0, 0, .55);
  border-radius: 18px;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px #000, 0 0 6px #38bdf8;
  opacity: .97;
  user-select: none;
  box-shadow: 0 2px 12px #000, 0 0 8px #38bdf8;
  position: fixed
}

#nextBtn:focus,
#nextBtn:hover {
  background: linear-gradient(90deg, #ec4899, #8f199e);
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 0 32px rgba(236, 72, 153, .8), 0 0 16px rgba(143, 25, 158, .8)
}

.fade {
  transition: opacity .8s ease-in-out
}

.fade-in {
  opacity: 1
}

#startScreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, #1a1a1a 0, #000 100%);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999
}

.countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.countdown-number {
  font-size: 120px;
  font-weight: 700;
  color: #38bdf8;
  text-shadow: 0 0 20px #38bdf8;
  animation: 1s infinite alternate pulse
}

.countdown-text {
  font-size: 24px;
  margin-top: 20px;
  letter-spacing: 2px;
  opacity: .8
}

@keyframes pulse {
  0% {
    transform: scale(.95);
    opacity: .7
  }

  100% {
    transform: scale(1.05);
    opacity: 1
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0)
  }

  20%,
  60% {
    transform: translateX(-3px)
  }

  40%,
  80% {
    transform: translateX(3px)
  }
}

.shake {
  animation: .4s shake
}

#overlay.hide,
#timer-circle-container.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s
}

#viewer.darken::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .85);
  z-index: 5;
  pointer-events: none
}

#gameName {
  font-size: 2.8rem;
  font-family: Orbitron, sans-serif;
  font-weight: 700;
  margin-bottom: 50px;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #38bdf8, 0 0 4px #38bdf8, 0 0 4px #000
}

#helpBtn,
#quitBtn,
#roundNumber,
#score-bar-score {
  font-family: Orbitron, Arial, sans-serif;
  font-weight: 700
}

#roundNumber {
  right: 38px;
  font-size: 1.7rem;
  color: #fff;
  padding: 8px 22px;
  pointer-events: none
}

#quitBtn {
  left: 38px;
  font-size: 1.3rem;
  color: #fff;
  padding: 10px 32px;
  border: none
}

#helpBtn,
.suggestions-list {
  font-size: 1.1rem;
  color: #fff
}

#quitBtn:focus,
#quitBtn:hover {
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 2px 12px #000, 0 0 8px #38bdf8
}

.suggestions-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  background: rgba(30, 30, 40, .98);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 18px #000, 0 0 8px #38bdf8;
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 2px;
  display: none
}

.suggestion-item {
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 1px solid #222;
  transition: background .2s
}

.suggestion-item:last-child {
  border-bottom: none
}

.suggestion-item:focus,
.suggestion-item:hover {
  background: #38bdf8;
  color: #222
}

#helpBtn {
  position: fixed;
  bottom: 32px;
  right: 38px;
  z-index: 40;
  padding: 12px 32px;
  border-radius: 18px;
  letter-spacing: 2px;
  box-shadow: 0 2px 12px #000, 0 0 8px #38bdf8;
  text-shadow: 0 2px 8px #000, 0 0 6px #38bdf8;
  border: none;
  opacity: .97;
  user-select: none
}

#score-bar,
#score-bar-container {
  border-radius: 0;
  box-shadow: none
}

#helpBtn:focus,
#helpBtn:hover {
  background: linear-gradient(90deg, #7b2cbf, #38bdf8);
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 2px 12px #000, 0 0 8px #38bdf8
}

#score-bar-container {
  position: fixed;
  top: 8%;
  width: 60vw;
  z-index: 2200;
  background: 0 0;
  height: auto;
  display: none;
  padding: 0
}

#score-bar-score {
  color: #38bdf8;
  font-size: 1.5em;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px #000, 0 0 4px #38bdf8;
  letter-spacing: 1px
}

#score-bar {
  height: 8px;
  width: 0%;
  transition: width 1s cubic-bezier(.4, 2, .6, 1);
  display: block;
  color: transparent;
  font-size: 0
}

@media (max-width:1200px) {
  #minimap {
    width: 380px !important;
    height: 380px !important;
    right: 18px !important;
    bottom: 60px !important
  }

  #valider-coord {
    width: 384px !important;
    right: 18px !important;
    bottom: 24px !important;
    font-size: 1.1em !important
  }

  #score-bar-container {
    width: 80vw !important;
    max-width: 400px !important
  }
}

@media (max-width:900px) {
  #score-bar-container {
    width: 90vw !important;
    max-width: 260px !important
  }

  #score-bar {
    height: 6px !important
  }

  #helpBtn,
  #valider-coord {
    bottom: 12px !important;
    right: 8px !important
  }

  #helpBtn,
  #minimap,
  #roundNumber,
  #valider-coord {
    right: 8px !important
  }

  #timer-circle-container,
  #timer-svg {
    width: 60px !important;
    height: 60px !important
  }

  #timer-bg, #timer-progress-circle {
    cx: 30px;
    cy: 30px;
    r: 27px;
  }

  #minimap {
    width: 260px !important;
    height: 260px !important;
    bottom: 48px !important
  }

  #valider-coord {
    width: 264px !important;
    font-size: 1em !important;
    padding: 10px 0 !important
  }

  #score-bar-container {
    width: 90vw !important;
    max-width: 260px !important;
    height: 36px !important
  }

  #gameCover {
    margin-bottom: 12px !important
  }

  #gameName {
    font-size: 1.5rem !important;
    margin-bottom: 20px !important
  }

  #gameDetails {
    font-size: 1.1rem !important;
    margin-bottom: 18px !important
  }

  #custom-next-btn,
  #nextBtn {
    font-size: 1.2rem !important;
    padding: .5em 1.2em !important;
    margin-top: 12px !important
  }

  #roundNumber {
    font-size: 1.1rem !important;
    padding: 6px 12px !important;
    top: 12px !important
  }

  #quitBtn {
    font-size: 1rem !important;
    padding: 7px 18px !important;
    top: 12px !important;
    left: 8px !important
  }

  #helpBtn {
    font-size: .95rem !important;
    padding: 8px 18px !important
  }

  #timer-circle-container {
    top: 10px !important
  }

  #timer-number {
    font-size: 1.1rem !important
  }

  #overlay {
    max-width: 98vw !important;
    padding: 6px 4px !important;
    gap: 4px !important
  }

  #guessInput {
    font-size: 16px !important;
    padding: 6px !important
  }

  .life {
    width: 24px !important;
    height: 24px !important
  }
}

@media (max-width:600px) {
  #score-bar-container {
    width: 98vw !important;
    max-width: 98vw !important;
    left: 50% !important;
    top: 6vw !important;
    transform: translateX(-50%) !important;
    border-radius: 0 !important
  }

  #score-bar {
    height: 4px !important;
    border-radius: 0 !important
  }
}

@media (max-width:480px) {

  /* Barre de potions - réduite et repositionnée */
  #potions-bar {
    bottom: 16px !important;
    left: 16px !important;
    gap: 16px !important
  }

  #potions-bar .potion-slot img {
    width: 40px !important;
    height: 40px !important
  }

  /* Input de saisie plus grand pour toucher */
  #guessInput {
    padding: 12px !important;
    min-height: 44px !important
  }

  /* Overlay ajusté */
  #overlay {
    bottom: 60px !important;
    width: 95vw !important;
    padding: 8px !important
  }

  /* Message plus grand */
  #message {
    font-size: 1rem !important;
    padding: 8px !important
  }

  /* Game info ajusté */
  #gameCover {
    margin-bottom: 12px !important
  }

  #gameName {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important
  }

  #gameDetails {
    font-size: 1rem !important;
    margin-bottom: 12px !important
  }

  /* Boutons plus accessibles */
  #nextBtn {
    font-size: 1.1rem !important;
    padding: 12px 24px !important;
    min-height: 44px !important
  }

  #quitBtn {
    font-size: .9rem !important;
    padding: 8px 16px !important;
    left: 8px !important;
    top: 8px !important
  }

  #roundNumber {
    font-size: 1rem !important;
    padding: 6px 12px !important;
    top: 8px !important;
    right: 8px !important
  }

  /* Animation de pièce ajustée */
  #coin-plusone {
    font-size: 1.8rem !important;
    top: 40px !important
  }

  #coin-plusone img {
    width: 28px !important;
    height: 28px !important
  }

  /* Suggestions list optimisée pour mobile */
  .suggestions-list {
    max-height: 120px !important;
    font-size: 1rem !important
  }

  .suggestion-item {
    padding: 12px 16px !important;
    min-height: 44px !important
  }
}

@media (max-width:380px) {

  /* Ajustements supplémentaires pour très petits écrans */
  #overlay {
    width: 98vw !important;
    padding: 4px !important
  }

  #potions-bar {
    bottom: 12px !important;
    left: 12px !important;
    gap: 12px !important
  }

  #potions-bar .potion-slot img {
    width: 36px !important;
    height: 36px !important
  }

  #quitBtn,
  #roundNumber {
    font-size: .8rem !important;
    padding: 6px 10px !important
  }
}

/* Styles pour le zoom des cartes en mode Maps */
#mapImageContainer {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: grab !important;
}

#mapImageContainer:active {
  cursor: grabbing !important;
}

#mapImageContainer.zoomed {
  cursor: grab !important;
}

#mapImage {
  transition: transform 0.2s ease;
  transform-origin: center center;
  pointer-events: none;
}

/* Indicateur de zoom */
#mapImageContainer::after {
  content: "🔍 Molette pour zoomer";
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

#mapImageContainer:hover::after {
  opacity: 1;
}

@media (max-width: 768px) {
  #mapImageContainer::after {
    content: "👆 Pincer pour zoomer";
  }
}