:root {
  --bg: #e1dfb6;          /* fond général */
  --text: #5c452d;        /* texte principal */
  --muted: #7a9244;       /* texte secondaire */
  --accent: #8cb04e;      /* bouton smash / bordures accent */
  --accent-light: #c5ee7d;/* hover / détails */
  --pass: #5c452d;        /* bouton pass */
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Choose screen */
.choose .container{max-width:880px; margin:40px auto; padding:0 16px}
h1{margin:0 0 16px}
.editions{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.edition{
  display:block; background:#fffdf5;
  border:2px solid var(--accent); border-radius:16px; padding:18px 16px; text-decoration:none; color:var(--text);
}
.edition:hover{border-color:var(--accent-light)}
.name{font-weight:700}
.btn, .secondary{
  display:inline-block; text-decoration:none; color:var(--text);
  background:#fffdf5; border:2px solid var(--accent); padding:10px 14px; border-radius:12px; cursor:pointer;
}

/* Game screen */
.topbar, .bottombar{
  height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 12px;
  background:#d8d6b8; border-bottom:2px solid var(--accent);
}
.bottombar{ border-top:2px solid var(--accent); border-bottom:none; position:fixed; bottom:0; width:100%; }

.back{color:var(--muted); text-decoration:none}
.title{font-weight:800}
.counter{color:var(--muted); font-variant-numeric:tabular-nums}
.hint{color:var(--muted); font-size:14px}

.stage{
  height: calc(100dvh - 56px - 56px);
  display:grid; grid-template-columns:1fr minmax(220px, 720px) 1fr; gap:12px; align-items:center; justify-items:center;
  padding:14px; overflow:hidden;
}

/* Carte principale */
.card {
  background: #fffdf5;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px; /* ↓ réduit un peu */
  width: 100%;
  max-width: 600px; /* ↓ était 720px */
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
  transition: max-width .3s ease;
}

.image-wrap {
  width: 100%;
  height: min(55vh, 420px);
  border-radius: 14px;
  overflow: hidden;
  background: #e1dfb6; /* ou un dégradé doux */
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center; /* centre horizontalement et verticalement */
}

.image-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;        
  height: auto;       /* garde le ratio original */
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (max-width: 900px) {
  .card {
    max-width: 480px;
    padding: 10px;
  }
  .image-wrap {
    height: min(50vh, 360px);
  }
  .card h2 {
    font-size: 22px;
  }
}

.card h2{margin:8px 0 0; font-size:28px}

.choice{
  width:100%; max-width:360px; height:min(20vh, 160px); min-height:110px;
  border:0; border-radius:18px; cursor:pointer;
  font-size:28px; font-weight:900; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  color:#fff; transition: transform .05s ease, filter .2s ease;
}
.choice.pass{background: var(--pass);}
.choice.smash{background: var(--accent);}
.choice.smash:hover{filter:brightness(1.05); background: var(--accent-light);}
.choice.pass:hover{filter:brightness(1.05);}
.choice:active{transform:translateY(1px)}

@media (max-width:900px){
  .stage{grid-template-columns:1fr; grid-template-rows:auto 1fr auto; gap:12px}
  .choice{max-width:none}
}

/* Dialog natif */
dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  background: #fffdf5;
  color: var(--text);
  box-shadow: 0 24px 48px rgba(0,0,0,.25);
}
dialog::backdrop {
  background: rgba(0,0,0,.4);
}
#save-form h3 { color: var(--text); }
#save-form .btn, #save-form .secondary {
  background: #ffffff;
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
#save-form .secondary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* État fin de partie */
.stage.finished .choice { display: none; } /* cache les gros boutons Pass/Smash */

/* Centre la carte (col 2) quand la partie est finie */
.stage.finished .card {
  grid-column: 2;           /* place la carte en colonne centrale */
}

/* Revenir au placement normal pendant la partie */
.stage:not(.finished) .card {
  grid-column: auto;
}

/* (déjà présent) on cache les boutons à la fin */
.stage.finished .choice { 
  display: none; 
}

.image-wrap.done {
  display:grid; place-items:center;
  background: repeating-linear-gradient(
    45deg, #ffffff, #ffffff 10px, #fff7dd 10px, #fff7dd 20px
  );
  position: relative;
}
.image-wrap.done::before{
  content: "C’est fini ! 🎃";
  font-size: 28px; font-weight: 900; color: var(--text);
  text-shadow: 0 1px 0 #fff;
}
.summary-line{
  margin: 8px 0 0; color: var(--muted); font-weight: 600;
}

/* groupe d’actions fin (footer) */
.actions-end{ display:flex; gap:8px; align-items:center; }

/* Bouton plein écran */
#fullscreen-toggle {
  font-size: 20px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}
#fullscreen-toggle:hover {
  background: rgba(0,0,0,0.1);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}