/* ================= GLOBAL ================= */
body{
 margin:0;
 font-family:Arial, sans-serif;
 background:#0f172a;
 color:white;
 display:flex;
 height:100vh;
}
.game-wrap{
 display:flex;
 flex:1;
 gap:10px;
 padding:10px;
}
/* ================= RESERVES ================= */
.reserve{
 width:300px;
 background:#1e293b;
 border-radius:10px;
 padding:10px;
 overflow:auto;
 display:flex;
 flex-direction:column;
}
.reserve h2{
 text-align:center;
 margin:0 0 10px;
 color:#38bdf8;
 font-size:40px;
 font-weight:bold;
 line-height:1;
 min-height:50px;
}
#filmsElements{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:8px;
}
#filmsElements .film .cube{
 width:100%;
 height:120px;
}
#possibleFusionsBox{
 margin:0 0 10px;
 padding:8px 10px;
 background:#0f172a;
 border:1px solid #334155;
 border-radius:10px;
 text-align:center;
 font-size:14px;
 font-weight:bold;
 color:#cbd5e1;
}
#possibleFusionsCount{
 color:#facc15;
 font-size:18px;
}
#actorsElements{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:6px;
 width:100%;
 align-items:start;
}
/* ================= ELEMENTS FILM / ACTEUR ================= */
.actor,
.film{
 display:flex;
 flex-direction:column;
 align-items:center;
 font-size:12px;
 cursor:pointer;
}
#actorsElements .actor{
 width:100%;
}
.cube{
 width:80px;
 height:100px;
 background:#334155;
 border-radius:8px;
 overflow:hidden;
}
.film .cube{
 width:240px;
 height:320px;
}
.cube img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.label{
 text-align:center;
 font-size:12px;
 line-height:1.2;
}
#actorsElements .actor .label{
 width:100%;
 font-size:14px;
 margin-top:6px;
}
.first-name{
 display:block;
}
.last-name{
 display:block;
 font-weight:bold;
}
/* ===== Bordures acteur dans la réserve ===== */
#actorsElements .actor .cube{
 border:5px solid transparent;
 border-radius:12px;
 box-sizing:border-box;
}
#actorsElements .actor.gender-m .cube{
 border:5px solid rgba(56,189,248,0.7);
}
#actorsElements .actor.gender-f .cube{
 border:5px solid rgba(248,56,56,0.7);
}
/* ================= PLAY AREA STRUCTURE ================= */
.play-area{
 flex:1;
 background:#0b1220;
 border-radius:10px;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 position:relative;
}
/* ================= TOP BAR ================= */
.top-bar{
 height:70px;
 background:linear-gradient(90deg,#0f172a,#111827);
 border-bottom:2px solid #1f2937;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 20px;
 flex-shrink:0;
}
.game-title{
 font-size:20px;
 font-weight:bold;
 color:#38bdf8;
 letter-spacing:1px;
}
.top-center{
 display:flex;
 align-items:center;
 gap:16px;
}
.stat-box{
 background:#1e293b;
 padding:8px 16px;
 border-radius:10px;
 font-weight:bold;
 font-size:15px;
 box-shadow:0 0 8px rgba(0,0,0,0.4);
}
.stat-separator{
 width:2px;
 height:26px;
 background:#475569;
 border-radius:2px;
}
.highscore{
 background:#3b2f0f;
 color:#facc15;
 font-size:18px;
 padding:10px 20px;
 box-shadow:none;
}
.top-right{
 display:flex;
 align-items:center;
 gap:6px;
}
.tmdb-text{
 font-size:12px;
 opacity:0.7;
}
.tmdb-logo{
 height:28px;
}
/* ================= MODERN SEARCH & SORT ================= */
#actorSearch,
#actorSort{
 width:100%;
 padding:8px 12px;
 margin-bottom:10px;
 border-radius:10px;
 border:1px solid #ccc;
 font-size:14px;
 background:#fff;
 color:#111827;
 box-shadow:0 2px 5px rgba(0,0,0,0.1);
 transition:all 0.2s ease;
 appearance:none;
 display:block;
 box-sizing:border-box;
}
#actorSearch::placeholder{
 color:#9ca3af;
}
#actorSearch:focus,
#actorSort:focus{
 outline:none;
 border-color:#38bdf8;
 box-shadow:0 0 0 2px rgba(56,189,248,0.3);
 background:#fff;
}
#actorSort{
 cursor:pointer;
}
#actorSort option{
 background:#fff;
 color:#111827;
}
/* ================= GAME ZONE ================= */
#gameZone{
  flex:1;
  background:
    linear-gradient(rgba(15,23,42,0.85), rgba(15,23,42,0.85)),
    url("https://i.ibb.co/Hfv1Yrjy/logo-CG.png") center center no-repeat;
  background-size:contain;
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
/* ================= FLOATING ELEMENTS ================= */
.floating{
 position:absolute;
 cursor:grab;
 transition:transform 0.18s ease, box-shadow 0.18s ease;
}
/* ================= FILM CADRE ================= */
.floating.film .cube{
 width:240px;
 height:320px;
 border:5px solid rgba(240,208,88,0.8);
 border-radius:15px;
 box-sizing:border-box;
 overflow:hidden;
}
.floating.film .cube:hover{
 transform:scale(1.03);
 box-shadow:0 0 20px rgba(240,208,88,0.6);
}
.floating.film .label{
 width:240px;
 text-align:center;
 margin-top:6px;
 font-size:14px;
 font-weight:bold;
 color:#fff;
}
/* ================= ACTEURS ================= */
.floating.actor{
 display:flex;
 flex-direction:column;
 align-items:center;
 font-size:12px;
 border-radius:15px;
 box-sizing:border-box;
}
.floating.actor.gender-m{
 border:5px solid rgba(56,189,248,0.7);
}
.floating.actor.gender-f{
 border:5px solid rgba(248,56,56,0.7);
}
.floating.actor:hover{
 transform:scale(1.08);
 z-index:10;
}
.floating.actor.dragging{
 animation:wiggle 0.15s infinite alternate;
 z-index:20;
}

.floating.actor.fusion-ready{
 box-shadow:0 0 20px 5px rgba(56,189,248,0.8);
 transform:scale(1.1);
}
@keyframes wiggle{
 0%{ transform:rotate(-3deg) translate(1px,-1px); }
 100%{ transform:rotate(3deg) translate(-1px,1px); }
}
/* ================= MESSAGE ================= */
.message{
 position:absolute;
 top:20px;
 left:50%;
 transform:translateX(-50%);
 color:white;
 padding:16px 24px 14px;
 border-radius:12px;
 display:none;
 z-index:2000;
 font-weight:bold;
 font-size:16px;
 letter-spacing:0.2px;
 box-shadow:0 10px 24px rgba(0,0,0,0.35);
 border:2px solid transparent;
 min-width:280px;
 text-align:center;
}
.message .message-icon{
 display:block;
 font-size:32px;
 line-height:1;
 margin-bottom:8px;
}
.message .message-text{
 display:block;
}
/* erreur */
.message.error{
 background:#b91c1c;
 border-color:#ef4444;
}
/* avertissement */
.message.warning{
 background:#c2410c;
 border-color:#fb923c;
}
/* succès */
.message.success{
 background:#166534;
 border-color:#22c55e;
}
/* info */
.message.info{
 background:rgba(15,23,42,0.95);
 border-color:#334155;
}

/* ================= BOTTOM BAR ================= */
.bottom-bar{
 height:70px;
 background:linear-gradient(90deg,#111827,#0f172a);
 border-top:2px solid #1f2937;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 20px;
 flex-shrink:0;
}
.bottom-left,
.bottom-center,
.bottom-right{
 display:flex;
 align-items:center;
 gap:14px;
}
.bottom-center{
 justify-content:center;
 flex:1;
}
/* ================= BUTTONS ================= */
.ui-btn,
.rules-btn{
 background:#1e293b;
 color:white;
 padding:8px 18px;
 border:none;
 border-radius:8px;
 font-weight:bold;
 cursor:pointer;
 transition:0.2s;
}
.ui-btn:hover,
.rules-btn:hover{
 background:#38bdf8;
 color:#0f172a;
}
/* ================= LANG SWITCH ================= */
.lang-switch{
 display:flex;
 background:#1e293b;
 border-radius:20px;
 overflow:hidden;
}
.lang{
 padding:6px 14px;
 border:none;
 background:transparent;
 color:white;
 font-weight:bold;
 cursor:pointer;
 transition:0.2s;
}
.lang.active{
 background:#38bdf8;
 color:#0f172a;
}

/* ================= RULES MODAL ================= */
.rules-modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.72);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:100;
 padding:20px;
}
.rules-content{
 background:linear-gradient(180deg,#1e293b 0%, #172033 100%);
 padding:28px;
 border-radius:18px;
 width:min(860px,95vw);
 max-height:88vh;
 overflow:auto;
 text-align:left;
 box-shadow:0 0 30px rgba(0,0,0,0.55);
 border:1px solid #334155;
}
.rules-header{
 text-align:center;
 margin-bottom:20px;
}
.rules-content h2{
 margin:0;
 color:#38bdf8;
 font-size:32px;
}
.rules-subtitle{
 margin-top:8px;
 color:#cbd5e1;
 font-size:15px;
}
.rules-grid{
 display:grid;
 grid-template-columns:repeat(2, minmax(0, 1fr));
 gap:14px;
 margin-top:18px;
}
.rules-card{
 background:#0f172a;
 border:1px solid #334155;
 border-radius:14px;
 padding:16px;
 box-shadow:0 6px 16px rgba(0,0,0,0.18);
}
.rules-card h3{
 margin:0 0 10px;
 font-size:18px;
 color:#f8fafc;
 display:flex;
 align-items:center;
 gap:8px;
}
.rules-card p{
 margin:0;
 color:#cbd5e1;
 line-height:1.55;
 font-size:14px;
}
.rules-highlight{
 display:inline-block;
 padding:2px 8px;
 border-radius:999px;
 font-weight:bold;
 font-size:13px;
 margin:2px 4px 2px 0;
}
.rules-highlight.good{
 background:rgba(34,197,94,0.18);
 color:#4ade80;
 border:1px solid rgba(34,197,94,0.35);
}
.rules-highlight.bad{
 background:rgba(239,68,68,0.18);
 color:#f87171;
 border:1px solid rgba(239,68,68,0.35);
}
.rules-highlight.gold{
 background:rgba(250,204,21,0.18);
 color:#facc15;
 border:1px solid rgba(250,204,21,0.35);
}
.rules-highlight.blue{
 background:rgba(56,189,248,0.18);
 color:#38bdf8;
 border:1px solid rgba(56,189,248,0.35);
}
.rules-steps{
 margin:0;
 padding-left:18px;
 color:#cbd5e1;
}
.rules-steps li{
 margin-bottom:8px;
 line-height:1.5;
}
.rules-points{
 margin-top:10px;
 display:grid;
 gap:8px;
}
.rules-point-line{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
 padding:8px 10px;
 border-radius:10px;
 background:#111827;
 border:1px solid #243041;
}
.rules-point-line span{
 color:#e5e7eb;
 font-size:14px;
}
.rules-point-line strong{
 font-size:16px;
}
.rules-point-line .plus10{
 color:#facc15;
}
.rules-point-line .plus2{
 color:#4ade80;
}
.rules-point-line .minus5{
 color:#f87171;
}
.rules-point-line .zero{
 color:#cbd5e1;
}
.rules-rank{
 margin-top:10px;
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:8px;
}
.rules-rank-box{
 background:#111827;
 border:1px solid #334155;
 border-radius:10px;
 padding:10px;
 text-align:center;
}
.rules-rank-box .rank-letter{
 display:block;
 font-size:20px;
 font-weight:bold;
 color:#38bdf8;
 margin-bottom:4px;
}
.rules-rank-box .rank-score{
 color:#cbd5e1;
 font-size:13px;
}
.rules-footer-note{
 margin-top:18px;
 padding:12px 14px;
 border-radius:12px;
 background:rgba(56,189,248,0.1);
 border:1px solid rgba(56,189,248,0.3);
 color:#dbeafe;
 line-height:1.5;
 font-size:14px;
}
.rules-content button{
 margin-top:22px;
 padding:10px 18px;
 border:none;
 border-radius:10px;
 background:#38bdf8;
 color:#0f172a;
 font-weight:bold;
 cursor:pointer;
 display:block;
 margin-left:auto;
 margin-right:auto;
 font-size:16px;
}
@media (max-width: 760px){
 .rules-grid{
  grid-template-columns:1fr;
 }
 .rules-rank{
  grid-template-columns:1fr;
 }
 .rules-content{
  padding:20px;
 }
 .rules-content h2{
  font-size:26px;
 }
}
/* ================= ABOUT MODAL ================= */
.about-wrap{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.about-card{
  background:linear-gradient(180deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95));
  border:1px solid rgba(56,189,248,0.22);
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
}
.about-intro{
  font-size:15px;
  line-height:1.65;
  color:#e2e8f0;
  margin:0;
}
.about-intro a{
  color:#38bdf8;
  font-weight:700;
  text-decoration:none;
}
.about-intro a:hover{
  text-decoration:underline;
}
.about-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px;
  border-radius:18px;
  background:
    radial-gradient(circle at top left, rgba(239,68,68,0.35), transparent 35%),
    radial-gradient(circle at bottom right, rgba(56,189,248,0.28), transparent 35%),
    linear-gradient(135deg, #111827, #1e293b 55%, #0f172a);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
}
.about-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  pointer-events:none;
}
.about-banner-left{
  display:flex;
  align-items:center;
  gap:14px;
  z-index:1;
}
.about-logo{
  width:72px;
  height:72px;
  min-width:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:900;
  color:white;
  background:linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow:
    0 10px 24px rgba(239,68,68,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.12);
}
.about-banner-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.about-banner-title{
  font-size:24px;
  font-weight:800;
  color:white;
  line-height:1.1;
}
.about-banner-subtitle{
  font-size:14px;
  color:#cbd5e1;
  line-height:1.4;
}
.about-banner-btn{
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  background:linear-gradient(135deg, #38bdf8, #0ea5e9);
  color:white;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(14,165,233,0.28);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.about-banner-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(14,165,233,0.36);
}
.about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.about-mini-card{
  background:rgba(15,23,42,0.7);
  border:1px solid rgba(148,163,184,0.16);
  border-radius:14px;
  padding:16px;
}
.about-mini-card h3{
  margin:0 0 8px;
  font-size:16px;
  color:#f8fafc;
}
.about-mini-card p{
  margin:0;
  color:#cbd5e1;
  line-height:1.6;
  font-size:14px;
}
.about-mini-card a{
  color:#38bdf8;
  text-decoration:none;
  font-weight:700;
}
.about-mini-card a:hover{
  text-decoration:underline;
}
.about-contact{
  display:inline-block;
  margin-top:6px;
  font-size:15px;
  font-weight:700;
  color:#facc15;
  word-break:break-word;
}
@media (max-width: 720px){
  .about-banner{
    flex-direction:column;
    align-items:flex-start;
  }
  .about-banner-btn{
    width:100%;
  }
}
/* ================= ABOUT / RANKING MODALS ================= */
.about-modal,
.ranking-modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.65);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:150;
}
.about-content,
.ranking-content{
 background:#1e293b;
 padding:30px;
 border-radius:14px;
 width:min(520px,90vw);
 text-align:center;
 box-shadow:0 0 24px rgba(0,0,0,0.55);
}
.about-content h2,
.ranking-content h2{
 margin-top:0;
 color:#38bdf8;
}
.about-content p,
.ranking-content p{
 line-height:1.6;
 color:#e5e7eb;
}
.about-content button,
.ranking-content button{
 margin-top:20px;
 padding:10px 18px;
 border:none;
 border-radius:8px;
 background:#38bdf8;
 color:#0f172a;
 font-weight:bold;
 cursor:pointer;
}
.ranking-box{
 margin-top:20px;
 background:#0f172a;
 border:1px solid #334155;
 border-radius:12px;
 padding:18px;
}
.ranking-line{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:10px 0;
 border-bottom:1px solid rgba(255,255,255,0.08);
}
.ranking-line:last-child{
 border-bottom:none;
}
.ranking-line span{
 color:#cbd5e1;
}
.ranking-line strong{
 color:#facc15;
 font-size:18px;
}
.ranking-info{
 margin-top:18px;
 font-size:14px;
 opacity:0.9;
}

/* ================= START GAME BUTTON ================= */
.start-game-btn{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);
 z-index:20;
 padding:18px 28px;
 border:none;
 border-radius:14px;
 background:linear-gradient(135deg,#38bdf8,#0ea5e9);
 color:#0f172a;
 font-size:20px;
 font-weight:bold;
 cursor:pointer;
 box-shadow:0 10px 30px rgba(56,189,248,0.25);
 transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.start-game-btn:hover{
 transform:translate(-50%, -50%) scale(1.04);
 box-shadow:0 14px 35px rgba(56,189,248,0.35);
}
.start-game-btn.hidden{
 display:none;
}
/* ================= START MODAL ================= */
.start-modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.78);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:200;
 padding:20px;
}
.start-modal-content{
 width:min(1200px, 94vw);
 max-height:88vh;
 overflow:hidden;
 background:
 radial-gradient(circle at top left, rgba(56,189,248,0.10), transparent 30%),
 radial-gradient(circle at bottom right, rgba(250,204,21,0.10), transparent 30%),
 #111827;
 border:1px solid #334155;
 border-radius:22px;
 padding:28px;
 box-shadow:0 0 30px rgba(0,0,0,0.6);
}
.start-modal-header{
 text-align:center;
 margin-bottom:20px;
}
.start-modal-content h2{
 margin:0;
 color:#38bdf8;
 font-size:30px;
}
.start-modal-subtitle{
 margin-top:8px;
 color:#cbd5e1;
 font-size:15px;
}
.start-carousel-wrap{
 position:relative;
 display:flex;
 align-items:center;
 gap:14px;
}
.start-carousel-btn{
 width:52px;
 min-width:52px;
 height:52px;
 border:none;
 border-radius:50%;
 background:#1e293b;
 color:#e5e7eb;
 font-size:26px;
 font-weight:bold;
 cursor:pointer;
 box-shadow:0 8px 18px rgba(0,0,0,0.28);
 transition:transform 0.18s ease, background 0.18s ease, color 0.18s ease;
 z-index:2;
}
.start-carousel-btn:hover{
 background:#38bdf8;
 color:#0f172a;
 transform:scale(1.08);
}
.start-carousel{
 overflow-x:auto;
 overflow-y:hidden;
 scroll-behavior:smooth;
 scrollbar-width:thin;
 scrollbar-color:#38bdf8 #0f172a;
 padding:8px 4px 14px;
 flex:1;
}
.start-carousel::-webkit-scrollbar{
 height:10px;
}
.start-carousel::-webkit-scrollbar-track{
 background:#0f172a;
 border-radius:999px;
}
.start-carousel::-webkit-scrollbar-thumb{
 background:#38bdf8;
 border-radius:999px;
}
.start-films-list{
 display:flex;
 gap:18px;
 width:max-content;
 min-width:100%;
}
.start-film-card{
 width:210px;
 min-width:210px;
 background:linear-gradient(180deg,#1e293b,#162033);
 border:1px solid #334155;
 border-radius:16px;
 padding:12px;
 cursor:pointer;
 transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
 display:flex;
 flex-direction:column;
 align-items:center;
 box-shadow:0 8px 20px rgba(0,0,0,0.22);
}
.start-film-card:hover{
 transform:translateY(-6px) scale(1.02);
 border-color:#38bdf8;
 box-shadow:0 16px 30px rgba(0,0,0,0.38);
}
.start-film-card .cube{
 width:100%;
 height:300px;
 border-radius:12px;
 overflow:hidden;
 background:#0f172a;
}
.start-film-card .label{
 margin-top:12px;
 font-size:15px;
 font-weight:bold;
 text-align:center;
 line-height:1.35;
 color:white;
 min-height:40px;
 display:flex;
 align-items:center;
 justify-content:center;
}
.start-film-card .start-film-year{
 margin-top:4px;
 font-size:13px;
 color:#94a3b8;
}
.start-modal-footer{
 margin-top:18px;
 text-align:center;
 color:#94a3b8;
 font-size:13px;
}
@media (max-width: 900px){
 .start-modal-content{
  padding:22px;
 }
 .start-film-card{
  width:180px;
  min-width:180px;
 }
 .start-film-card .cube{
  height:260px;
 }
 .start-carousel-btn{
  width:44px;
  min-width:44px;
  height:44px;
  font-size:22px;
 }
}

@media (max-width: 700px){
 .start-carousel-wrap{
  gap:10px;
 }
 .start-film-card{
  width:160px;
  min-width:160px;
 }
 .start-film-card .cube{
  height:235px;
 }
 .start-modal-content h2{
  font-size:24px;
 }
 .start-modal-subtitle{
  font-size:14px;
 }
}
/* ================= GAME OVER MODAL ================= */
.gameover-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.72);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}
.gameover-content{
  background:linear-gradient(180deg, #1e293b, #172033);
  padding:28px;
  border-radius:18px;
  width:min(720px, 92vw);
  max-height:90vh;
  overflow:auto;
  text-align:center;
  box-shadow:0 0 30px rgba(0,0,0,0.5);
  border:1px solid #334155;
}
.gameover-content h2{
  margin:0 0 26px;
  color:#f87171;
  font-size:36px;
  font-weight:900;
  text-align:center;
  letter-spacing:0.5px;
}
.gameover-main{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:30px;
  margin-bottom:26px;
}
/* COLONNES */
.gameover-score-value{
  font-size:82px;
  line-height:1;
  font-weight:900;
  color:#facc15;
  text-shadow:0 0 16px rgba(250,204,21,0.2);
  margin-top:90px;
}
/* TITRES */
.gameover-score-label,
.rank-label{
  font-size:16px;
  font-weight:800;
  color:#e2e8f0;
  margin-bottom:20px;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:center;
  background:#0f172a;
  border:1px solid #334155;
  border-radius:10px;
  padding:10px 16px;
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.35),
    0 4px 10px rgba(0,0,0,0.25);
}
/* SCORE */
.gameover-score-value{
  font-size:82px;
  line-height:1;
  font-weight:900;
  color:#facc15;
  text-shadow:0 0 18px rgba(250,204,21,0.25);
  margin-top:110px;
}
/* SEPARATION */
.gameover-divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.05),
    rgba(148,163,184,0.9),
    rgba(255,255,255,0.05)
  );
  border-radius:999px;
}
/* IMAGE RANG */
.rank-image-frame{
  width:300px;
  height:300px;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.35),
    0 10px 24px rgba(0,0,0,0.22);
}

.rank-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* BOUTON */
.gameover-content button{
  padding:12px 22px;
  border:none;
  border-radius:10px;
  background:#38bdf8;
  color:#0f172a;
  font-weight:bold;
  cursor:pointer;
  font-size:18px;
}
/* RESPONSIVE */
@media (max-width:700px){
  .gameover-main{
    flex-direction:column;
    gap:24px;
  }
  .gameover-divider{
    width:100%;
    height:1px;
    align-self:auto;
    background:linear-gradient(
      to right,
      rgba(255,255,255,0.05),
      rgba(148,163,184,0.9),
      rgba(255,255,255,0.05)
    );
  }
  .gameover-left{
    height:auto;
  }
  .gameover-score-value{
    font-size:70px;
  }
  .rank-image-frame{
    width:min(300px,80vw);
    height:min(300px,80vw);
  }
}
.score-unit{
 font-size:0.45em;
 opacity:1;
 margin-left:6px;
}
/* ================= HINT BUTTON + HINT LINE ================= */
.hint-btn{
 position:absolute;
 bottom:12px;
 left:12px;
 padding:8px 14px;
 font-size:14px;
 font-weight:bold;
 background:#ffd43b;
 color:#000;
 border:none;
 border-radius:6px;
 cursor:pointer;
 z-index:50;
 transition:background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.hint-btn:hover{
 background:#ffe066;
 transform:translateY(-1px);
}
.hint-btn:active{
 transform:translateY(0);
}
.hint-btn:disabled{
 opacity:0.5;
 cursor:not-allowed;
}
.hint-line{
 position:absolute;
 height:4px;
 background:#ffd43b;
 transform-origin:left center;
 pointer-events:none;
 z-index:1;
 box-shadow:0 0 10px #ffd43b, 0 0 20px rgba(255,212,59,0.6);
 animation:hintFade 4s forwards;
}
@keyframes hintFade{
 0%{
  opacity:1;
 }
 100%{
  opacity:0;
 }
}
/* Le fil doit passer sous les cubes */
.floating{
 z-index:10;
}