* {
  box-sizing: border-box
}

:root {
  --green: #08752d;
  --dark: #043d20;
  --light: #13a53e;
  --yellow: #ffd200;
  --cream: #fffdf1;
  --red: #d62828;
  --shadow: 0 12px 30px rgba(0, 0, 0, .22)
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Montserrat, Arial, sans-serif;
  color: #fff;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, .09) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .07) 0 3px, transparent 4px),
    linear-gradient(135deg, #d82640, #650303 55%, #44010e);
  background-size: 55px 55px, 85px 85px, 100% 100%;
}

.app {
  width: min(1500px, 100%);
  margin: auto;
  padding: 18px
}

.hero {
  display: grid;
  grid-template-columns: 180px 1fr 230px;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
  background: rgba(0, 47, 23, .45);
  box-shadow: var(--shadow);
  overflow: hidden
}

.brand-mark {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: radial-gradient(circle, #ffffff, #ffffff);
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 5px #ffd200;
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: .75;
  font-style: italic;
  font-weight: 900
}

.brand-mark span {
  font-size: 39px
}

.brand-mark small {
  font: 900 13px Montserrat;
  margin-top: 14px;
  letter-spacing: 3px
}

.hero-copy {
  text-align: center
}

.eyebrow {
  margin: 0 0 3px;
  font-weight: 800;
  color: #d8f7d3;
  letter-spacing: 3px
}

h1 {
  font-size: clamp(36px, 5vw, 72px);
  line-height: .95;
  margin: 0 0 13px;
  font-weight: 900
}

.headline {
  display: inline-block;
  background: var(--yellow);
  color: #111;
  padding: 10px 24px;
  font-weight: 900;
  font-size: clamp(18px, 2vw, 30px);
  transform: skew(-7deg);
  box-shadow: 0 6px 0 #aa8900
}

.hero-copy>p:last-child {
  font-size: 18px;
  margin: 18px 0 0
}

.hero-copy strong {
  color: #ffe100
}

.hero-bottle {
  height: 175px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end
}

.splash {
  position: absolute;
  width: 220px;
  height: 100px;
  background: radial-gradient(ellipse, #ffe900 0 10%, #e4bf03 30%, transparent 70%);
  filter: blur(2px);
  transform: rotate(-8deg)
}

.bottle {
  position: relative;
  width: 100px;
  height: 160px;
  filter: drop-shadow(0 10px 9px rgba(0, 0, 0, .4));
  z-index: 2
}

.cap {
  position: absolute;
  top: 0;
  left: 34px;
  width: 32px;
  height: 17px;
  border-radius: 5px 5px 2px 2px;
  background: #a20a20;
  border: 2px solid #c9f3a9
}

.neck {
  position: absolute;
  top: 13px;
  left: 38px;
  width: 24px;
  height: 45px;
  background: #17391f;
  border-radius: 5px
}

.body {
  position: absolute;
  bottom: 0;
  left: 7px;
  width: 86px;
  height: 112px;
  border-radius: 20px 20px 27px 27px;
  background: linear-gradient(90deg, #351b0c, #6d3514 45%, #291207);
  border: 2px solid #c69a58;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.body:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .25), transparent 25%);
  pointer-events: none
}

.body span {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: .9;
  text-align: center;
  color: white;
  z-index: 1;
  text-shadow: 1px 2px #173b1e
}

.body small {
  z-index: 1;
  color: #ffe100;
  font-weight: 900;
  margin-top: 8px
}

.game-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 20px;
  margin-top: 20px
}

.board-wrap {
  min-width: 0
}

.board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(0, 48, 24, .5);
  border: 2px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow)
}

.card {
  aspect-ratio: 1/1;
  perspective: 900px;
  cursor: pointer;
  min-width: 0
}

.card.disabled {
  pointer-events: none
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  transform-style: preserve-3d
}

.card.flipped .card-inner,
.card.matched .card-inner {
  transform: rotateY(180deg)
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 17px;
  border: 3px solid #e9ffe2;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3);
  overflow: hidden
}

.back {
  background: linear-gradient(135deg, #a93333, #b3132c);
  display: flex;
  align-items: center;
  justify-content: center
}

.back:before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(245, 244, 237, 0.65);
  border-radius: 12px
}

.back-logo {
  font-family: Georgia, serif;
  font-size: clamp(20px, 2.5vw, 34px);
  line-height: .75;
  color: white;
  text-align: center;
  text-shadow: 2px 2px #032b16;
  z-index: 1
}

.back-logo small {
  display: block;
  font: 900 9px Montserrat;
  letter-spacing: 2px;
  color: #ffe100;
  margin-top: 9px
}

.front {
  transform: rotateY(180deg);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center
}

.front.world {
  background: linear-gradient(145deg, #fff8b0, #fff)
}

.product-art {
  width: 70%;
  height: 70%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center
}

.mini-bottle {
  width: 43%;
  height: 82%;
  position: relative
}

.mini-bottle .cap {
  left: 35%;
  width: 30%;
  height: 11%;
  top: 0
}

.mini-bottle .neck {
  left: 40%;
  width: 20%;
  height: 28%;
  top: 9%
}

.mini-bottle .body {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70%;
  border-radius: 22% 22% 27% 27%;
  font-size: 0
}

.mini-bottle .body span {
  font-size: clamp(10px, 1.5vw, 17px)
}

.mini-bottle .body small {
  font-size: 7px;
  margin-top: 4px
}

.product-label {
  position: absolute;
  bottom: 3%;
  font-weight: 900;
  color: #063f1f;
  font-size: clamp(8px, 1.1vw, 14px);
  text-align: center
}

.matched .face {
  box-shadow: 0 0 0 4px var(--yellow), 0 0 35px rgba(255, 210, 0, .9)
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.stat,
.instructions {
  background: rgba(0, 47, 23, .68);
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  padding: 18px;
  text-align: center
}

.stat-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #d6f4cf
}

.stat strong {
  display: block;
  font-size: 36px;
  color: #ffe000;
  margin-top: 5px
}

.instructions {
  text-align: left
}

.instructions h2 {
  font-size: 18px;
  margin: 0 0 14px;
  color: #ffe000
}

.instructions p {
  margin: 11px 0;
  font-size: 14px
}

.btn {
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font: 900 16px Montserrat;
  cursor: pointer;
  background: var(--yellow);
  color: #111;
  box-shadow: 0 5px 0 #aa8900;
  transition: .15s
}

.btn:hover {
  transform: translateY(-2px)
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #aa8900
}

.btn.secondary {
  background: #fff;
  color: #a20a20;
  box-shadow: 0 5px 0 #c7c7c7
}

footer {
  display: flex;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
  font-weight: 800;
  font-size: 12px;
  color: #dff8d8
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 30, 14, .82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20
}

.hidden {
  display: none
}

.modal {
  width: min(500px, 100%);
  text-align: center;
  background: linear-gradient(145deg, #7d0315, #a20a20);
  border: 3px solid #ffe000;
  border-radius: 28px;
  padding: 40px 28px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .5)
}

.result-icon {
  font-size: 70px
}

.modal h2 {
  font-size: 40px;
  margin: 8px 0;
  color: #ffe000
}

.modal p {
  font-size: 18px
}

.result-time {
  font-weight: 900;
  margin: 18px 0 25px;
  color: #fff
}

@media(max-width:1000px) {
  .board {
    grid-template-columns: repeat(4, 1fr)
  }

  .hero {
    grid-template-columns: 120px 1fr
  }

  .hero-bottle {
    display: none
  }

  .brand-mark {
    width: 110px;
    height: 110px;
    font-size: 25px
  }

  .brand-mark span {
    font-size: 29px
  }

  .game-layout {
    grid-template-columns: 1fr
  }

  .panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
  }

  .instructions {
    grid-column: 1/-1
  }

  .btn {
    min-height: 56px
  }
}

@media(max-width:620px) {
  .app {
    padding: 9px
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 15px
  }

  .brand {
    display: flex;
    justify-content: center
  }

  .hero-copy h1 {
    font-size: 36px
  }

  .headline {
    font-size: 15px;
    padding: 9px 13px
  }

  .hero-copy>p:last-child {
    font-size: 13px
  }

  .board {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    padding: 9px
  }

  .card {
    aspect-ratio: 1/1.08
  }

  .panel {
    grid-template-columns: 1fr 1fr
  }

  .stat {
    padding: 12px
  }

  .stat:last-of-type {
    grid-column: 1/-1
  }

  .stat strong {
    font-size: 28px
  }

  .instructions {
    grid-column: 1/-1
  }

  .btn {
    grid-column: span 1;
    font-size: 13px;
    padding: 13px
  }

  .btn.secondary {
    grid-column: span 1
  }
}

@media(max-width:390px) {
  .board {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px
  }

  .face {
    border-width: 2px
  }

  .back-logo {
    font-size: 15px
  }

  .hero-copy h1 {
    font-size: 30px
  }
}


/* Photo réelle du produit World Cola Mali */
.hero-bottle img {
  position: relative;
  z-index: 3;
  height: min(190px, 18vw);
  max-height: 190px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .45));
}

.card .front.world {
  background: linear-gradient(145deg, #fff6a8, #ffffff 55%, #e8ffe8);
}

.card .front.world .real-bottle {
  width: 76%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .28));
}

.winner-badge {
  position: absolute;
  right: 4%;
  top: 4%;
  background: #ffd200;
  color: #111;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: clamp(7px, 1vw, 11px);
  font-weight: 900;
  z-index: 4;
}

@media(max-width:1000px) {
  .hero-bottle img {
    height: 150px
  }
}

@media(max-width:620px) {
  .hero-bottle img {
    height: 120px
  }

  .hero {
    gap: 8px
  }
}

@media(max-width:420px) {
  .hero-bottle img {
    height: 95px
  }
}

.distractor-image {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
  margin: auto;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .25));
}

.distractor-art {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.product-label {
  font-size: clamp(7px, 1vw, 13px);
  font-weight: 800;
  text-align: center;
}