:root{
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif;
  color:#111a38;
  --blue:#149fea; --yellow:#ffcc29; --orange:#ff6815; --navy:#111a38;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden}
body{
  min-height:100dvh;
  background:
    radial-gradient(circle at 12% 30%,#99e68b99 0 9%,transparent 10%),
    radial-gradient(circle at 90% 34%,#b7e77e88 0 10%,transparent 11%),
    linear-gradient(#4bc8f5 0 49%,#f7c481 49% 100%);
  padding:max(env(safe-area-inset-top),8px) 10px max(env(safe-area-inset-bottom),8px);
}
button,input,select{font:inherit}.hidden{display:none!important}
.app-shell{max-width:760px;margin:0 auto;min-height:100%}

.topbar{height:118px;display:flex;align-items:center;justify-content:center;position:relative;padding:0 74px 0 8px}
.brand{text-align:center;line-height:.78;filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 7px 0 #124b91);transform:rotate(-1deg)}
.brand-line{font-weight:1000;letter-spacing:-.07em;-webkit-text-stroke:2px #15205c}
.brand-mime{font-size:clamp(48px,11vw,78px)}
.brand-mime .m1{color:#ff3b30}.brand-mime .m2{color:#ffc400}.brand-mime .m3{color:#13a7ff}.brand-mime .m4{color:#22c95a}
.brand-family{font-size:clamp(28px,6.7vw,48px);margin-top:9px;color:#2288ff}
.brand-family b{color:#ff3d5e}.brand-family span{color:#249fea}
.top-actions{position:absolute;right:4px;top:18px;display:flex;gap:7px;align-items:center}
.round-btn,.end-game-btn{border:0;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 5px 12px #1c579744;font-size:25px;display:grid;place-items:center}
.end-game-btn{background:#ff5d5d;color:white;font-size:20px}

.setup-card{background:#ffffffee;border:4px solid #fff;border-radius:30px;padding:20px;box-shadow:0 13px 24px #284c7830}
.setup-card h1{text-align:center;margin:0 0 16px;font-size:30px}
.setup-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:1000;margin-bottom:14px}
.count-wrap{display:flex;align-items:center;gap:7px}.count-btn{width:40px;height:40px;border:0;border-radius:14px;background:#1ba8f6;color:white;font-size:26px;font-weight:1000}.count-wrap select{appearance:none;border:3px solid #d9efff;border-radius:14px;background:white;font-weight:1000;text-align:center;padding:8px 16px}
.players-form{display:grid;gap:10px}.player-row{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:6px;border-radius:18px;background:#eef8ff}.player-color{width:42px;height:42px;border-radius:14px;border:3px solid #fff;box-shadow:0 2px 8px #0002}.player-row input{width:100%;border:0;border-radius:13px;padding:11px 13px;font-weight:900;outline:0;color:#10264e}
.start-btn{margin-top:16px;width:100%;border:0;border-radius:22px;padding:15px;background:linear-gradient(#41d83f,#0fb72f);color:#fff;font-weight:1000;font-size:22px;box-shadow:0 6px 0 #078d20}

/* --- Écran de jeu inspiré de la maquette --- */
body.game-active{height:100dvh;min-height:0;overflow:hidden;padding-top:max(env(safe-area-inset-top),4px);padding-bottom:max(env(safe-area-inset-bottom),4px)}
body.game-active .app-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
body.game-active .topbar{height:88px;padding-right:68px}
body.game-active .brand-mime{font-size:clamp(40px,9.5vw,63px)}
body.game-active .brand-family{font-size:clamp(24px,5.8vw,39px);margin-top:6px}
body.game-active .top-actions{top:10px}
body.game-active .round-btn,body.game-active .end-game-btn{width:44px;height:44px;font-size:21px}

.game-screen{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:7px}
.scoreboard{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(82px,1fr);gap:7px;overflow-x:auto;scrollbar-width:none;padding:1px 1px 3px}
.scoreboard::-webkit-scrollbar{display:none}
.player-score{height:82px;min-width:82px;border-radius:18px;padding:5px 6px;color:white;font-weight:1000;position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:44px 1fr;align-items:center;box-shadow:0 4px 8px #0002;border:3px solid #fff0;overflow:hidden}
.player-score.active{border-color:#fff;box-shadow:0 0 0 3px #fff8,0 5px 10px #0003;transform:translateY(-1px)}
.score-avatar{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:29px;grid-row:1;grid-column:1}
.score-points{grid-column:2;grid-row:1;font-size:24px;text-align:center;white-space:nowrap}.score-name{grid-column:1/3;grid-row:2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;line-height:1.1}

.turn-banner{justify-self:center;width:min(92%,620px);height:66px;background:#fff4c9;border:4px solid #ffbe19;border-radius:25px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 4px 0 #ffffffaa}
.turn-avatar{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;border:4px solid #fff;font-size:35px;box-shadow:0 0 0 3px #ff94bf}
.turn-copy{display:flex;align-items:baseline;gap:5px;font-weight:1000}.turn-copy small{font-size:17px}.turn-copy strong{font-size:31px;color:#ff431c;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.turn-copy span{font-size:30px}

.game-stage{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto auto auto;align-items:center;justify-items:center;gap:5px;padding:3px 5px 0;position:relative}
.deck{width:100%;height:100%;min-height:0;display:grid;place-items:center;position:relative;perspective:1000px}
.card,.deck-shadow{width:min(42vw,230px);max-height:100%;aspect-ratio:3/4;border-radius:18px;border:6px solid #fff;box-shadow:0 8px 0 #9aa3b0,0 13px 20px #3d2d1b33;position:absolute;overflow:hidden}
.deck-shadow{background:#eaf5ff;border-color:#fff;pointer-events:none}
.deck-shadow-3{transform:translate(-11px,10px) rotate(-5deg)}.deck-shadow-2{transform:translate(9px,7px) rotate(4deg)}.deck-shadow-1{transform:translate(-3px,4px) rotate(-1.5deg)}
.back-card{background:linear-gradient(135deg,#6bc9ff,#189cff);border-color:#eaf7ff;box-shadow:inset 0 0 0 5px #178ed8,0 8px 0 #6d7d90,0 13px 20px #3d2d1b33;display:grid;place-content:center;color:white;z-index:4}
.back-card:before{content:"";position:absolute;inset:12px;border-radius:13px;background-image:radial-gradient(circle,#ffffff2f 0 4px,transparent 5px);background-size:36px 36px;opacity:.8}.paw,.question{position:relative;z-index:2;text-align:center}.paw{font-size:50px;filter:grayscale(1) brightness(.55)}.question{font-size:82px;font-weight:1000;line-height:.9;margin-top:6px}
.front-card{z-index:4;background:white;animation:flipIn .55s ease}.front-card img{width:100%;height:100%;display:block;object-fit:contain;background:white}@keyframes flipIn{from{transform:rotateY(90deg) scale(.9)}to{transform:rotateY(0) scale(1)}}.shuffle{animation:shake .13s infinite alternate}@keyframes shake{to{transform:translateX(8px) rotate(2deg)}}

.launch-btn{width:min(74%,430px);border:5px solid white;border-radius:34px;padding:10px 20px;background:linear-gradient(#ff8a14,#ff4d08);color:white;font-weight:1000;font-size:30px;box-shadow:0 6px 0 #d23c09,0 9px 15px #b54d1638;display:flex;align-items:center;justify-content:center;gap:17px;line-height:1}.launch-btn:disabled{opacity:.78}.play-icon{font-size:32px}
.status-stack{display:grid;justify-items:center;gap:4px}.timer-pill{background:#fff7dc;border-radius:22px;padding:6px 22px;font-size:27px;font-weight:1000;color:#111;box-shadow:0 3px 0 #ffffffaa}.timer-pill span{color:#0a61c7}.reroll-pill{background:#ffe5a6;border-radius:16px;padding:5px 18px;font-size:16px;font-weight:1000}.reroll-pill strong{color:#ff4d08;font-size:22px}
.reroll-btn{border:0;border-radius:14px;padding:7px 12px;background:#8f4ddb;color:white;font-weight:1000;font-size:14px}
.hint-box{align-self:end;width:min(94%,620px);background:#cfeeff;border:2px solid #fff;border-radius:17px;padding:7px 12px;text-align:center;color:#1757a0;font-weight:800;font-size:12px;line-height:1.15}

.guess-panel{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:20;width:min(96%,660px);background:#ffffffee;border:3px solid #ffbe19;border-radius:18px;padding:7px;box-shadow:0 7px 20px #0003;backdrop-filter:blur(8px)}.guess-title{text-align:center;font-weight:1000;font-size:14px;margin-bottom:5px}.guesser-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.guesser-btn,.nobody-btn{border:0;border-radius:11px;padding:7px 6px;font-weight:1000;font-size:12px;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nobody-btn{width:100%;margin-top:5px;background:#46566d}

.dialog{border:0;border-radius:25px;width:min(92vw,540px);padding:0;box-shadow:0 25px 70px #0006}.dialog::backdrop{background:#001c3c88;backdrop-filter:blur(5px)}.dialog form,.end-dialog-inner{padding:20px}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{margin:0}.close-btn{border:0;border-radius:50%;width:38px;height:38px;background:#edf5ff;font-size:19px}.dialog fieldset{border:0;padding:10px 0;margin:8px 0}.dialog fieldset label{display:block;background:#eef8ff;padding:12px;border-radius:13px;margin:7px 0;font-weight:900}.rules{background:#fff4c9;border-radius:15px;padding:12px;line-height:1.35}.danger-btn,.ok-btn,.secondary-dialog-btn{width:100%;border:0;border-radius:17px;padding:12px;font-weight:1000;font-size:18px}.danger-btn{background:#ffe0e0;color:#b51e1e;margin-bottom:9px}.ok-btn{background:#20c542;color:white}.secondary-dialog-btn{margin-top:9px;background:#edf3f8;color:#26354b}.end-dialog-inner{text-align:center}.end-trophy{font-size:55px}.end-dialog h2{margin:4px 0 8px}.winner-text{font-size:19px;font-weight:1000;color:#0b61c8}.final-ranking{display:grid;gap:7px;margin:14px 0}.rank-row{display:flex;justify-content:space-between;background:#f2f8ff;border-radius:13px;padding:9px 11px;font-weight:900}

@media(max-width:520px){
  body{padding-left:5px;padding-right:5px}
  body.game-active .topbar{height:76px}
  body.game-active .brand-mime{font-size:43px}body.game-active .brand-family{font-size:27px}
  body.game-active .top-actions{top:7px;right:2px}.top-actions{gap:4px}
  body.game-active .round-btn,body.game-active .end-game-btn{width:38px;height:38px;font-size:18px}
  .game-screen{gap:5px}.scoreboard{gap:5px}.player-score{height:70px;grid-template-columns:37px 1fr;grid-template-rows:37px 1fr;border-radius:15px;padding:4px}.score-avatar{width:35px;height:35px;font-size:24px}.score-points{font-size:20px}.score-name{font-size:13px}
  .turn-banner{height:58px;border-radius:21px}.turn-avatar{width:43px;height:43px;font-size:29px}.turn-copy small{font-size:14px}.turn-copy strong{font-size:26px;max-width:150px}.turn-copy span{font-size:24px}
  .game-stage{gap:4px}.card,.deck-shadow{width:min(39vw,190px);border-width:5px;border-radius:16px}.paw{font-size:42px}.question{font-size:69px}
  .launch-btn{width:min(76%,350px);font-size:25px;padding:8px 16px;border-radius:29px;border-width:4px;box-shadow:0 5px 0 #d23c09}.play-icon{font-size:27px}
  .timer-pill{font-size:22px;padding:5px 17px}.reroll-pill{font-size:14px;padding:4px 13px}.reroll-pill strong{font-size:18px}.hint-box{font-size:10px;padding:5px 8px;border-radius:13px}
  .guesser-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.guess-panel{bottom:2px}
}
@media(max-height:760px){
  body.game-active .topbar{height:68px}.player-score{height:60px}.score-avatar{width:31px;height:31px;font-size:21px}.player-score{grid-template-columns:33px 1fr;grid-template-rows:32px 1fr}.score-points{font-size:17px}.score-name{font-size:11px}
  .turn-banner{height:49px}.turn-avatar{width:36px;height:36px;font-size:24px}.turn-copy strong{font-size:22px}.turn-copy small{font-size:12px}.turn-copy span{font-size:20px}
  .card,.deck-shadow{width:min(34vw,165px)}.launch-btn{font-size:21px;padding:7px 14px}.timer-pill{font-size:19px}.reroll-pill{font-size:12px}.hint-box{font-size:9px;padding:4px 7px}
}
@media(max-height:660px){.hint-box{display:none}.game-stage{grid-template-rows:minmax(0,1fr) auto auto auto}.card,.deck-shadow{width:min(31vw,145px)}.topbar{height:60px!important}.brand-mime{font-size:36px!important}.brand-family{font-size:22px!important}.player-score{height:53px}.turn-banner{height:45px}.launch-btn{font-size:19px}.timer-pill{font-size:17px}}

/* HD illustrations */
.front-card{background:rgba(255,255,255,.98);border-color:#fff;box-shadow:0 10px 26px #1238;display:grid;place-items:center;padding:8px}
.front-card img{width:100%;height:100%;display:block;object-fit:contain;background:transparent;filter:drop-shadow(0 8px 8px #0002)}
.deck.revealed .front-card{width:min(66vw,340px);aspect-ratio:1/1;border-radius:26px}
.deck.revealed .deck-shadow{display:none}
@media(max-width:520px){.deck.revealed .front-card{width:min(69vw,315px)}}
@media(max-height:760px){.deck.revealed .front-card{width:min(56vw,270px)}}
@media(max-height:660px){.deck.revealed .front-card{width:min(49vw,220px)}}

/* --- Correctif final mobile : aucune superposition, carte HD entière --- */
body.card-revealed .launch-btn{display:none!important}
body.card-revealed .hint-box{display:none!important}
body.card-revealed .game-stage{
  grid-template-rows:minmax(0,1fr) auto auto auto;
  gap:5px;
}
body.card-revealed .deck{min-height:0}
body.card-revealed .front-card{
  width:min(66vw,330px);
  max-width:100%;
  max-height:100%;
  aspect-ratio:1/1;
  border-radius:24px;
  padding:10px 10px 42px;
  overflow:hidden;
}
body.card-revealed .front-card img{
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}
.card-label{
  position:absolute;
  left:8px;right:8px;bottom:6px;
  text-align:center;
  font-weight:1000;
  font-size:clamp(18px,4.4vw,27px);
  line-height:1.05;
  color:#101a38;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.card-revealed .status-stack{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
}
body.card-revealed .timer-pill,
body.card-revealed .reroll-pill{
  margin:0;
  padding:5px 12px;
  font-size:15px;
  line-height:1;
}
body.card-revealed .timer-pill span{font-size:18px}
body.card-revealed .reroll-pill strong{font-size:18px}
body.card-revealed .reroll-btn{
  margin:0;
  padding:7px 12px;
  font-size:13px;
  line-height:1.05;
}
body.card-revealed .guess-panel{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(96%,660px);
  padding:7px;
  margin:0 auto;
}
body.card-revealed .guesser-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
body.card-revealed .guesser-btn,
body.card-revealed .nobody-btn{padding:8px 6px;font-size:13px;min-height:34px}

@media(max-height:780px){
  body.game-active .topbar{height:68px}
  body.game-active .brand-mime{font-size:34px!important}
  body.game-active .brand-family{font-size:20px!important;margin-top:3px!important}
  .player-score{height:58px!important;grid-template-columns:34px 1fr!important;grid-template-rows:33px 1fr!important}
  .score-avatar{width:31px!important;height:31px!important;font-size:21px!important}
  .score-points{font-size:17px!important}.score-name{font-size:12px!important}
  .turn-banner{height:48px!important}.turn-avatar{width:36px!important;height:36px!important;font-size:24px!important}
  .turn-copy small{font-size:13px!important}.turn-copy strong{font-size:23px!important}.turn-copy span{font-size:21px!important}
  body.card-revealed .front-card{width:min(54vw,245px);padding:7px 7px 34px}
  .card-label{font-size:18px;bottom:5px}
  body.card-revealed .game-stage{gap:3px}
  body.card-revealed .guess-panel{padding:5px}
  body.card-revealed .guesser-btn,body.card-revealed .nobody-btn{padding:6px 5px;min-height:30px;font-size:12px}
}
@media(max-height:680px){
  body.game-active .topbar{height:58px}
  body.card-revealed .front-card{width:min(47vw,205px);padding-bottom:30px}
  body.card-revealed .timer-pill,body.card-revealed .reroll-pill{font-size:12px;padding:4px 9px}
  body.card-revealed .timer-pill span,body.card-revealed .reroll-pill strong{font-size:15px}
  body.card-revealed .reroll-btn{font-size:11px;padding:5px 8px}
  body.card-revealed .guess-title{font-size:12px;margin-bottom:3px}
  body.card-revealed .guesser-btn,body.card-revealed .nobody-btn{font-size:11px;min-height:27px;padding:5px}
}