/* =============================================
   Morpho Toutou Interactive — game-v15.css
   (inherits all v14 rules + multiplayer)
   ============================================= */

/* ─ Webfont ─ */
@font-face {
  font-family: 'HollyJourney';
  src: url('hollyjourney.woff2') format('woff2'),
       url('hollyjourney.woff') format('woff'),
       url('hollyjourney.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─ Reset & Base ─ */
#mti-app * { box-sizing: border-box; margin: 0; }
#mti-app *::before, #mti-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
#mti-app {
  font-family: 'Nunito', 'Segoe UI', Tahoma, sans-serif;
  --mti-fs:    1em;
  --rad-color: #4a4a4a;
  --suf-color: #1a1a2e;
  --orange:    #E27D60;
  --orange-dk: #c85e40;
  --white:     #ffffff;
  --off-white: #f7f5f2;
  --text:      #1a1a1a;
  --radius:    18px;
  --p1-color:  #3d6bd8;
  --p2-color:  #d83d3d;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  position: relative;
}

/* ─ Header ─ */
.mti__header { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid #eee; }
.mti__logo { font-size:var(--mti-fs); line-height:1; }
.mti__title { font-size:var(--mti-fs); font-weight:800; color:var(--text); letter-spacing:-.01em; }
.mti__subtitle { font-size:var(--mti-fs); color:#888; margin-top:3px; }

/* ─ Board grid ─ */
.mti__board {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 20px;
  align-items: start;
  transition: grid-template-columns .35s cubic-bezier(.4,0,.2,1);
}
.mti__board.mti--drag-rad, .mti__board.mti--slot-rad { grid-template-columns: 0.4fr 2fr 1fr; }
.mti__board.mti--drag-suf, .mti__board.mti--slot-suf { grid-template-columns: 1fr 2fr 0.4fr; }
.mti__board.mti--slot-rad.mti--slot-suf              { grid-template-columns: 0.4fr 2fr 0.4fr; }

.mti__card-zone { transition: opacity .3s ease, transform .3s ease; }
.mti__board.mti--drag-rad .mti__card-zone--rad,
.mti__board.mti--drag-suf .mti__card-zone--suf { opacity:.35; transform:scale(.9); }
.mti__board.mti--slot-rad .mti__card-zone--rad,
.mti__board.mti--slot-suf .mti__card-zone--suf { opacity:.5; transform:scale(.92); }

/* ─ Card zones ─ */
.mti__card-zone { display:flex; flex-direction:column; align-items:center; gap:14px; }
.mti__card-display {
  width:100%; aspect-ratio:63/88; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 14px 16px; position:relative; cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none;
  transition:transform .15s, box-shadow .15s;
  box-shadow: 10px 20px 10px rgba(0,0,0,0.1);
  overflow:visible;
}
.mti__card-display:active { cursor:grabbing; }
.mti__card-display:hover  { transform:translateY(-3px); }
.mti__card-zone--rad .mti__card-display { background:none; box-shadow:none; border:none; }
.mti__card-zone--suf .mti__card-display { background:none; box-shadow:none; border:none; }

.mti__dc { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; }
.mti__dc-img { width:100%; height:100%; object-fit:contain; border-radius:14px; }
.mti__dc-label { font-size:var(--mti-fs); font-weight:normal; color:var(--text); letter-spacing:.06em; text-align:center; font-family:'HollyJourney', cursive; font-synthesis:none; }
.mti__dc-hint  { font-size:var(--mti-fs); color:rgba(0,0,0,.35); font-style:italic; letter-spacing:.04em; text-align:center; }
.mti__dc--empty { gap:6px; opacity:.5; cursor:default; }
.mti__dc--empty > span:first-child { font-size:var(--mti-fs); }
.mti__dc.mti--dragging { opacity:.25; cursor:grabbing; }
.mti__dc.mti--placed   { opacity:.2; cursor:default; }
.mti__piece.mti--success { background:#68B27B !important; border-color:#4a9060 !important; transition:background .2s, border-color .2s; }

/* ─ Nav ─ */
.mti__nav { display:flex; align-items:center; gap:10px; }
.mti__nav-btn {
  width:38px; height:38px; border-radius:50%; border:2px solid rgba(0,0,0,.15);
  background:var(--white); color:var(--text); font-size:var(--mti-fs); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s, box-shadow .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.08); padding:0;
}
.mti__nav-btn:hover:not(:disabled) { background:#E27D60; color:white; border-color:transparent; transform:scale(1.1); box-shadow:0 4px 12px rgba(226,125,96,.35); }
.mti__nav-btn:disabled { opacity:.35; cursor:default; }
.mti__nav-count { font-size:var(--mti-fs); font-weight:700; color:#888; min-width:42px; text-align:center; }

/* ─ Assembly center ─ */
#mti-app .mti__assembly {
  background:none !important; border-radius:18px !important; padding:0 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:0 !important; box-shadow:none !important;
}
.mti--mp-hand .mti__assembly { width:54%; }
#mti-app .mti__assembly-slots { display:flex !important; flex-direction:row !important; gap:0 !important; width:100% !important; }

.mti__piece {
  flex:1; aspect-ratio:63/88; border-radius:12px; border:none;
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:transform .18s, box-shadow .18s, border-color .18s, background .18s;
  padding:8px; text-align:center; cursor:pointer;
}
.mti__piece-ph { font-size:var(--mti-fs); color:rgba(100,100,100,.6); font-style:italic; pointer-events:none; line-height:1.5; }
.mti__piece.filled { border-style:solid; border-color:rgba(255,255,255,.7); cursor:default; }
.mti__piece.drag-over { transform:scale(1.06); border-style:solid; border-color:rgba(255,255,255,.9); background:rgba(255,255,255,.92); box-shadow:0 0 0 4px rgba(255,255,255,.5),0 8px 24px rgba(0,0,0,.12); }
.mti__piece-remove {
  position:absolute; top:-10px; right:-10px; width:36px; height:36px;
  border-radius:50%; border:none; background:#cf4156; color:white;
  font-size:22px; line-height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:10; padding:0 0 7px 0;
  transition:background .15s, transform .15s;
}
.mti__piece-remove:hover { background:#a02020; transform:scale(1.18); }

@keyframes mti-drop-bounce { 0%{transform:scale(1.12)} 50%{transform:scale(.97)} 100%{transform:scale(1)} }
.mti__piece.mti--drop-bounce { animation:mti-drop-bounce .4s cubic-bezier(.34,1.56,.64,1); }

.mti__combo-word { text-align:center; background:rgba(255,255,255,.15); border-radius:10px; padding:8px 16px; display:flex; align-items:center; justify-content:center; transition:background .2s; transform:rotate(-2deg); }
.mti__combo-word.has-word { background:rgba(255,255,255,.3); }
#mti-app .mti__combo-word strong { font-size:var(--mti-fs); font-weight:800; color:white !important; text-shadow:none; letter-spacing:.03em; }
.mti__word-ph { font-size:var(--mti-fs); color:rgba(255,255,255,.4); }

/* ─ Buttons ─ */
.mti__btn--ok {
  background:#ffffff; color:#c85e40; border:none; border-radius:24px;
  padding:10px 28px; font-size:var(--mti-fs); font-weight:800; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.1); transition:background .15s, transform .1s, box-shadow .15s, opacity .15s;
  letter-spacing:.02em;
}
.mti__btn--ok:hover:not(:disabled) { background:#fff8f6; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.mti__btn--ok:disabled { opacity:.45; cursor:default; transform:none; }

/* Ghost / secondary button */
.mti__btn--ghost {
  background:rgba(255,255,255,.18); color:white; border:2px solid rgba(255,255,255,.4);
  border-radius:24px; padding:10px 22px; font-size:var(--mti-fs); font-weight:700;
  cursor:pointer; transition:background .15s, transform .1s;
  font-family:inherit;
}
.mti__btn--ghost:hover { background:rgba(255,255,255,.3); transform:translateY(-2px); }

/* Draw button */
.mti__btn--draw {
  background:#3d6bd8; color:white; border:none; border-radius:24px;
  padding:10px 22px; font-size:var(--mti-fs); font-weight:800; cursor:pointer;
  box-shadow:0 4px 14px rgba(61,107,216,.35); transition:background .15s, transform .1s;
  font-family:inherit;
}
.mti__btn--draw:hover:not(:disabled) { background:#2d58c0; transform:translateY(-2px); }
.mti__btn--draw:disabled { opacity:.4; cursor:default; transform:none; }

/* Score */
.mti__score { color:rgba(255,255,255,.85); font-size:var(--mti-fs); font-weight:700; }
.mti__score strong { font-size:var(--mti-fs); color:white; }

/* ─ Mascot ─ */
.mti__mascot { background:var(--white); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:10px; width:100%; animation:mti-mascot-in .3s ease; }
@keyframes mti-mascot-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.mti__mascot[hidden] { display:none; }
.mti__mascot-bubble { flex:1; font-size:var(--mti-fs); color:var(--text); font-weight:600; line-height:1.4; }
.mti__mascot-dog { font-size:var(--mti-fs); flex-shrink:0; }
.mti__mascot-dog img { width:40px; height:40px; object-fit:contain; }

@keyframes mti-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px) rotate(-2deg)} 40%{transform:translateX(6px) rotate(2deg)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.shake { animation:mti-shake .4s ease; }

/* ─ Ghost drag ─ */
.mti-drag-ghost { position:fixed; z-index:99999; pointer-events:none; transform:rotate(4deg) scale(1.05); box-shadow:0 18px 50px rgba(0,0,0,.35) !important; border-radius:14px; overflow:visible; will-change:left,top; opacity:.92; }
.mti-drag-ghost .mti__dc-hint { display:none; }

/* ─ Solo end screen ─ */
.mti__end { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:48px 24px; text-align:center; background:var(--off-white); border-radius:14px; }
.mti__end-trophy { font-size:var(--mti-fs); }
.mti__end-title  { font-size:var(--mti-fs); font-weight:900; color:var(--text); }
.mti__end-sub    { font-size:var(--mti-fs); color:#555; }
.mti__end-sub strong { color:var(--orange-dk); }
.mti__btn-restart { margin-top:8px; background:var(--orange); color:white; border:none; border-radius:24px; padding:12px 32px; font-size:var(--mti-fs); font-weight:800; cursor:pointer; box-shadow:0 4px 16px rgba(226,125,96,.35); transition:transform .1s, box-shadow .15s; font-family:inherit; }
.mti__btn-restart:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(226,125,96,.45); }

/* ─ Confetti ─ */
#mti-confetti { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; display:none; }

/* ─ Responsive ─ */
@media (max-width:640px) {
  .mti__board { grid-template-columns:1fr; grid-template-rows:auto; }
  .mti__assembly { order:-1; }
  .mti__card-zone--rad { order:-2; }
  .mti__dc-label { font-size:var(--mti-fs); }
  .mti__assembly-slots { gap:8px; }
  .mti__piece { aspect-ratio:63/88; }
}

/* ─ Slot card display ─ */
#mti-app .mti__piece-type { font-size:var(--mti-fs); font-weight:800; letter-spacing:.08em; opacity:.45; display:block; margin-bottom:4px; }
.mti__piece--rad .mti__piece-type { color:#c85e40; }
.mti__piece--rad { transform:rotate(-3deg); }
.mti__piece--suf .mti__piece-type { color:#3a7a9c; }
.mti__piece--suf { transform:rotate(3deg); top:11px; }
.mti__piece--suf:not(.filled)::before, .mti__piece--rad:not(.filled)::before { content:''; width:100%; height:100%; background:#f9feff; position:absolute; left:0; top:0; border-radius:10px; z-index:-99999999; border:3px solid #b1d4da; }

#mti-app .mti__piece.drag-target { animation:mti-pulse 1s infinite alternate; border-style:dashed; }
@keyframes mti-pulse { from{box-shadow:0 0 0 0 rgba(226,125,96,.4)} to{box-shadow:0 0 0 8px rgba(226,125,96,.0)} }
#mti-app .mti__piece--suf.drag-target { animation:mti-pulse-suf 1s infinite alternate; }
@keyframes mti-pulse-suf { from{box-shadow:0 0 0 0 rgba(91,143,168,.4)} to{box-shadow:0 0 0 8px rgba(91,143,168,.0)} }

#mti-app .mti__piece.filled { flex-direction:column; gap:0; padding:0; }
#mti-app .mti__slot-img { width:100%; flex:1; min-height:0; border-radius:0; overflow:visible; background:none; cursor:pointer; }
#mti-app .mti__slot-img img { width:100%; height:100%; display:block; cursor:pointer; }
#mti-app .mti__slot-img--empty { background:rgba(0,0,0,.04); min-height:50px; }
#mti-app .mti__slot-label { display:none; }
#mti-app .mti__slot-img img { box-shadow:10px 20px 10px rgba(0,0,0,0.1); border-radius:14px; }

/* ─ Error states ─ */
@keyframes mti-shake-slot {
  0%,100%{transform:translateX(0) rotate(var(--slot-rot,0deg))}
  15%{transform:translateX(-7px) rotate(var(--slot-rot,0deg))}
  30%{transform:translateX(7px) rotate(var(--slot-rot,0deg))}
  45%{transform:translateX(-5px) rotate(var(--slot-rot,0deg))}
  60%{transform:translateX(5px) rotate(var(--slot-rot,0deg))}
  75%{transform:translateX(-3px) rotate(var(--slot-rot,0deg))}
}
.mti__piece--rad { --slot-rot:-3deg; }
.mti__piece--suf { --slot-rot:3deg; }
.mti__piece.mti--error { animation:mti-shake-slot .55s ease; border:2.5px solid #e03030 !important; box-shadow:0 0 0 3px rgba(224,48,48,.2); }

/* ─ Deck fail ─ */
@keyframes mti-shake-deck {
  0%,100%{transform:scale(.92) translateX(0)}
  15%{transform:scale(.92) translateX(-8px)}
  35%{transform:scale(.92) translateX(8px)}
  55%{transform:scale(.92) translateX(-5px)}
  75%{transform:scale(.92) translateX(5px)}
}
.mti__card-zone.mti--deck-fail { opacity:1 !important; transform:scale(1) !important; }
.mti__card-zone.mti--deck-fail .mti__card-display { animation:mti-shake-deck .55s ease; opacity:1 !important; }

.mti__next-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20; pointer-events:auto; }
.mti__next-overlay-btn { background:#fff; border:2px solid #e03030; border-radius:50px; padding:8px 14px; font-weight:800; font-size:var(--mti-fs); cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.3); white-space:nowrap; color:#e03030; transition:background .15s, color .15s; }
.mti__next-overlay-btn:hover, .mti__next-overlay-btn:active { background:#e03030; color:#fff; }

/* ─ Card stack ─ */
.mti__card-zone { position:relative; }
.mti__card-display { position:relative; z-index:2; }
.mti__card-wrap { position:relative; width:100%; }
.mti__verso-card { position:absolute; width:100%; aspect-ratio:63/88; border-radius:14px; background-size:cover; background-position:center; background-repeat:no-repeat; pointer-events:none; user-select:none; }
.mti__verso-1 { transform:translate(0,-26px) rotate(-2deg) scale(.91); z-index:1; box-shadow:10px 20px 10px rgba(0,0,0,0.1); }
.mti__verso-2 { transform:translate(0,-26px) rotate(2deg) scale(.91); z-index:0; box-shadow:10px 20px 10px rgba(0,0,0,0.1); }

/* ─ Joker input ─ */
.mti__joker-input { display:block; width:calc(100% - 8px); margin:6px 4px 0; padding:5px 8px; border:2px solid #E27D60; border-radius:30px 0 0 30px; font-size:.9rem; font-weight:normal; font-family:'HollyJourney', cursive; color:#333; background:#fff8f5; outline:none; text-align:center; font-synthesis:none; }
.mti__joker-input--right { position:absolute; width:120px; background:none; left:1px; top:158px; border:none; font-size:38px; text-align:center; }
.mti__piece--suf .mti__joker-input { position:absolute; width:120px; background:none; left:16px; top:152px; border:none; font-size:36px; text-align:center; }
@keyframes mti-blink-border { 0%,100% { border-bottom-color: rgba(226,125,96,.9); } 50% { border-bottom-color: rgba(226,125,96,.1); } }
.mti__joker-input:placeholder-shown { animation: mti-blink-border 1s ease-in-out infinite; border-bottom: 3px solid rgba(226,125,96,.9); }
.mti__joker-input::placeholder { color: rgba(226,125,96,.7); font-family:'HollyJourney',cursive; font-size:inherit; }
.mti__piece--rad .mti__joker-input { position:absolute; width:120px; background:none; right:0; top:164px; border:none; font-size:36px; text-align:center; height:65px; }
.mti__joker-input:focus { border-color:#c0603a; background:#fff; box-shadow:0 0 0 3px rgba(226,125,96,.2); }

/* ─ Hint button & modal ─ */
#mti-app .mti__hint-wrap { text-align:center; margin-top:8px; min-height:28px; }
#mti-app .mti__hint-btn {
  display:inline-flex; align-items:center; column-gap:var(--padding-xs,10px);
  background-color:var(--bricks-color-503ff9,#ffc107);
  padding:0 var(--padding-sm,20px); border:none; border-radius:0;
  color:var(--couleur-6,#212121); font-family:inherit; font-size:var(--mti-fs);
  font-weight:600; cursor:pointer; white-space:nowrap; line-height:44px; transition:opacity .2s;
}
#mti-app .mti__hint-btn:hover { background:rgba(0,0,0,.1); }

#mti-app .mti__modal {
  display:flex; position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:9999; align-items:center; justify-content:center; padding:16px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; pointer-events:none;
}
#mti-app .mti__modal.mti--modal-open { opacity:1; visibility:visible; pointer-events:auto; }
body.mti--no-scroll { overflow:hidden; }
#mti-app .mti__modal-box { background:#fff; border-radius:18px; padding:28px 24px 24px; max-width:400px; width:100%; max-height:80vh; overflow-y:auto; position:relative; box-shadow:0 8px 40px rgba(0,0,0,.25); }
#mti-app .mti__modal-close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:var(--mti-fs); cursor:pointer; color:#888; line-height:1; }
#mti-app .mti__modal-close:hover { color:#333; }
#mti-app .mti__modal-sub { font-size:var(--mti-fs); letter-spacing:.05em; color:#999; margin:0 0 4px; }
#mti-app .mti__modal-title { font-size:var(--mti-fs); font-weight:900; margin:0 0 16px; color:#E27D60; }
#mti-app .mti__modal-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
#mti-app .mti__modal-list li { background:#f4f4f4; border-radius:8px; padding:6px 14px; font-size:var(--mti-fs); font-weight:600; color:#333; text-transform:lowercase; }

/* =============================================
   MULTIPLAYER SCREENS
   ============================================= */

/* ── Mode select ── */
.mti__mode-select {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 24px;
  text-align: center;
}
.mti__mode-mascot { width: 80px; height: 80px; }
.mti__mode-mascot img { width: 100%; height: 100%; object-fit: contain; }
.mti__mode-mascot svg { width: 100%; height: 100%; }
.mti__mode-title { font-size:var(--mti-fs); font-weight: 900; color: var(--text); }
.mti__mode-sub   { font-size:var(--mti-fs); color: #666; margin-top: -8px; }
.mti__mode-btns  { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.mti__mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 32px; background: var(--white); border: 3px solid #eee;
  border-radius: 20px; cursor: pointer; min-width: 160px;
  transition: border-color .2s, transform .15s, box-shadow .15s;
  font-family: inherit;
}
.mti__mode-btn:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(226,125,96,.2);
}
.mti__mode-btn--multi:hover { border-color: var(--p1-color); box-shadow: 0 8px 24px rgba(61,107,216,.2); }
.mti__mode-icon  { font-size:var(--mti-fs); }
.mti__mode-btn strong { font-size:var(--mti-fs); font-weight: 800; color: var(--text); }
.mti__mode-desc  { font-size:var(--mti-fs); color: #888; max-width: 140px; line-height: 1.4; }

/* ── Player setup ── */
.mti__player-setup {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; padding: 40px 24px; text-align: center;
}
.mti__setup-title { font-size:var(--mti-fs); font-weight: 900; color: var(--text); }
.mti__setup-fields { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 480px; }
.mti__setup-field  { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px; }
.mti__setup-label  { font-size:var(--mti-fs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #666; }
.mti__setup-input {
  padding: 12px 16px; border: 2.5px solid #ddd; border-radius: 12px;
  font-size:var(--mti-fs); font-weight: 700; font-family: inherit; color: var(--text);
  outline: none; text-align: center; transition: border-color .2s, box-shadow .2s;
  background: var(--white);
}
.mti__setup-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(226,125,96,.15); }
.mti__btn--setup-start { margin-top: 8px; }

/* ── Turn transition modal overlay ── */
.mti__turn-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.mti__turn-modal--visible { opacity: 1; pointer-events: auto; }

.mti__turn-modal-card {
  background: #fff;
  border-radius: 24px;
  max-width: 420px; width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  transform: scale(.08) rotate(-18deg);
  transition: transform .5s cubic-bezier(.34,1.42,.64,1);
}
.mti__turn-modal--visible .mti__turn-modal-card { transform: scale(1) rotate(0deg); }

/* Header */
.mti__turn-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-radius: 24px 24px 0 0;
}
.mti__turn-modal-header--success { background: #F4A742; }
.mti__turn-modal-header--pass    { background: #9CA3AF; }
.mti__turn-modal-header-title {
  font-size: 15px; font-weight: 800; color: #1a1a1a; letter-spacing: .01em;
}
.mti__turn-modal-badge {
  background: #111; color: #F4A742;
  font-size: 13px; font-weight: 800; letter-spacing: .03em;
  padding: 5px 12px; border-radius: 50px;
  white-space: nowrap;
}

/* Body */
.mti__turn-modal-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 28px 32px 24px;
  text-align: center;
}

/* Handoff avatars */
.mti__turn-modal-handoff {
  display: flex; align-items: center; gap: 16px;
}
.mti__turn-modal-hplayer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mti__turn-modal-av {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff;
}
.mti__turn-modal-av--sm {
  width: 52px; height: 52px; font-size: 20px;
  opacity: .55;
}
.mti__turn-modal-av--lg {
  width: 72px; height: 72px; font-size: 26px;
}
.mti__turn-modal-arrow {
  font-size: 22px; color: #9CA3AF; line-height: 1;
}
.mti__turn-modal-hname {
  font-size: 13px; color: #9CA3AF;
}
.mti__turn-modal-hname--bold {
  font-weight: 700; color: #1a1a1a;
}

/* Announcement */
.mti__turn-modal-sub {
  font-size: 15px; color: #6B7280; margin: 0;
}
.mti__turn-modal-name-big {
  font-size: 28px; font-weight: 900; color: #1a1a1a; margin: 0; line-height: 1.1;
}

/* Score pill */
.mti__turn-modal-score-pill {
  background: #F3F4F6; border-radius: 50px;
  padding: 8px 20px; font-size: 14px; color: #374151;
}
.mti__turn-modal-score-pill strong { color: #111; }

/* CTA */
.mti__turn-modal-btn {
  width: 100%; padding: 16px 24px;
  background: #111; color: #fff;
  font-size: 16px; font-weight: 800;
  border: none; border-radius: 50px; cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.mti__turn-modal-btn:hover  { background: #222; transform: translateY(-1px); }
.mti__turn-modal-btn:active { transform: translateY(0); }

/* Pass hint */
.mti__turn-modal-hint {
  font-size: 13px; color: #9CA3AF; margin: 0;
}

/* ── Turn transition (legacy board-replace, kept for safety) ── */
.mti__turn-transition {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 48px 24px; text-align: center;
  background: var(--off-white); border-radius: 18px;
}
.mti__transition-badge {
  font-size:var(--mti-fs); font-weight: 900; padding: 10px 28px;
  border-radius: 50px; color: white; letter-spacing: .02em;
}
.mti__transition-badge--p1 { background: var(--p1-color); box-shadow: 0 4px 16px rgba(61,107,216,.3); }
.mti__transition-badge--p2 { background: var(--p2-color); box-shadow: 0 4px 16px rgba(216,61,61,.3); }
.mti__transition-hint  { font-size:var(--mti-fs); color: #555; }
.mti__transition-scores { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.mti__tscore {
  font-size:var(--mti-fs); font-weight: 600; color: #888;
  padding: 6px 14px; background: white; border-radius: 20px;
  border: 2px solid #eee;
}
.mti__tscore--active { color: var(--text); border-color: var(--orange); font-weight: 800; }

/* ── Multi player header (during turn) ── */
.mti__mp-header {
  position: absolute;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  background: rgba(255,255,255,.15); border-radius: 12px;
  padding: 10px 16px;
}
.mti__mp-player { display: flex; align-items: center; gap: 10px; }
.mti__mp-name   { font-size:var(--mti-fs); font-weight: 900; color: white; }
.mti__mp-score  { font-size:var(--mti-fs); font-weight: 700; background: rgba(255,255,255,.25); color: white; padding: 3px 10px; border-radius: 20px; }
.mti__mp-piles  { font-size:var(--mti-fs); color: rgba(255,255,255,.8); font-weight: 600; }
.mti__mp-piles strong { color: white; }
.mti__mp-hand   { font-size:var(--mti-fs); color: rgba(255,255,255,.65); font-style: italic; }

/* ── Multi actions (Piocher / Je passe) ── */
.mti__mp-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 4px;
}

/* ── Multi end screen ── */
.mti__mp-end {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 48px 24px;
  text-align: center; background: var(--off-white); border-radius: 18px;
}
.mti__mp-results { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.mti__mp-result-row {
  display: flex; align-items: center; gap: 10px;
  background: white; border-radius: 12px; padding: 12px 18px;
  font-size:var(--mti-fs); font-weight: 600; color: #444;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.mti__mp-result-row--winner {
  background: #fff8e8; border: 2px solid #f5c842;
  font-weight: 800; color: var(--text);
}
.mti__mp-result-name  { flex: 1; text-align: left; }
.mti__mp-result-score { font-weight: 900; color: var(--orange-dk); }
.mti__mp-end-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }


/* ── Screen fade-in animations ── */
@keyframes mti-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.mti__mode-select,
.mti__player-setup,
.mti__turn-transition,
.mti__mp-end,
.mti__end {
  animation: mti-fadein .3s ease both;
}
/* Stagger sub-elements inside mode select */
.mti__mode-btn:nth-child(1) { animation: mti-fadein .35s .05s ease both; }
.mti__mode-btn:nth-child(2) { animation: mti-fadein .35s .15s ease both; }
.mti__setup-field:nth-child(1) { animation: mti-fadein .3s .05s ease both; }
.mti__setup-field:nth-child(2) { animation: mti-fadein .3s .12s ease both; }

/* ─ Multiplayer hand zone ─ */
.mti__board.mti--mp-hand { display:flex; flex-wrap:wrap; flex-direction:row; align-items:start; gap:0; }
.mti__mp-hand-zone { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px 0; width:43%; }
.mti__mp-hand-card { position:relative; width:130px; border-radius:12px; cursor:pointer; border:none; transition:transform .15s; background:#fff; display:flex; flex-direction:column; }
.mti__mp-hand-card:hover { transform:translateY(-4px); }
.mti__mp-hand-card.mti--placed { opacity:.35; cursor:default; pointer-events:none; }
.mti__mp-hand-card img { width:100%; height:auto; object-fit:contain; border-radius:10px; }
.mti__mp-hand-label { display:flex; align-items:center; justify-content:center; text-align:center; font-family:'HollyJourney',cursive; font-weight:normal; font-synthesis:none; font-size:var(--mti-fs); padding:2px 4px; flex:1; }

@media (max-width:600px){
  .mti--mp-hand .mti__assembly, .mti__mp-hand-zone { width:100%; }
  .mti__mp-hand-zone { order:-1; }
}

/* Turn transition - success message & auto-advance */
.mti__turn-success{font-size:var(--mti-fs);font-weight:bold;color:#E27D60;margin-bottom:16px;animation:mtiPulse .6s ease-out;}
.mti__transition-hint{font-size:var(--mti-fs);color:#888;margin-top:12px;}

/* Points badge on suffix cards */
.mti__dc-pts{position:absolute;top:6px;right:8px;background:#E27D60;color:#fff;font-size:var(--mti-fs);font-weight:800;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;z-index:10;line-height:1;pointer-events:none;}

/* ── End screen scoreboard ── */
.mti__scoreboard{width:100%;border-collapse:collapse;margin:16px 0;font-size:var(--mti-fs);}
.mti__scoreboard thead tr{border-bottom:2px solid #e0e0e0;}
.mti__scoreboard th{padding:6px 12px;text-align:left;font-size:var(--mti-fs);text-transform:uppercase;color:#999;font-weight:600;}
.mti__scoreboard th:last-child,.mti__scoreboard td:last-child{text-align:right;}
.mti__scoreboard td{padding:10px 12px;border-bottom:1px solid #f0f0f0;vertical-align:middle;}
.mti__sb-rank{font-size:var(--mti-fs);width:36px;}
.mti__sb-name{font-weight:700;font-size:var(--mti-fs);}
.mti__sb-score{font-size:var(--mti-fs);font-weight:900;color:#E27D60;white-space:nowrap;}
.mti__sb-score small{font-size:var(--mti-fs);font-weight:400;color:#888;margin-left:2px;}
.mti__sb-row--winner td{background:#fffbf0;}
.mti__sb-row--winner .mti__sb-name{color:#d4811e;}
/* ============================================
   BONUS SYSTEM
   ============================================ */

.mti__mp-hand-card--bonus {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  min-height: 90px;
  border: 2px solid #f0c040;
  border-radius: 10px;
  background: #fff8e7;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(240,192,64,.35);
}
.mti__mp-hand-card--bonus:active { cursor: grabbing; }
.mti__mp-hand-card--bonus.mti--dragging { opacity: .5; }

.mti__bonus-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
  margin: 4px auto 2px;
}

.mti__mp-hand-card--bonus .mti__mp-hand-label {
  font-size:var(--mti-fs);
  text-align: center;
  line-height: 1.2;
  color: #7a5c00;
  padding: 0 4px 4px;
}

.mti__bonus-info-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0c040;
  border: none;
  font-size:var(--mti-fs);
  font-weight: 700;
  color: #5a3e00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
  line-height: 1;
}
.mti__bonus-info-btn:hover { background: #e6a800; }

/* --- Défausse drop zone --- */
.mti__defausse-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.mti__defausse-slot {
  position: relative;
  width: 72px;
  height: 90px;
  border: 2px dashed #f0c040;
  border-radius: 10px;
  background: rgba(240,192,64,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background .15s, border-color .15s;
}
.mti__defausse-slot.mti__defausse--over {
  background: rgba(240,192,64,.28);
  border-color: #e6a800;
  transform: scale(1.05);
}
.mti__defausse-verso {
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: .6;
  display: block;
}
.mti__defausse-label {
  font-size:var(--mti-fs);
  color: #a07800;
  text-align: center;
  margin-top: 4px;
  padding: 0 4px;
  line-height: 1.2;
}

/* --- Formed words zone --- */
.mti__formed-words-zone {
  padding: 6px 0 2px;
  min-height: 10px;
}
.mti__fw-title {
  font-size:var(--mti-fs);
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
  text-align: center;
}
.mti__fw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.mti__fw-word {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f0f4ff;
  border: 1px solid #c8d4f8;
  border-radius: 8px;
  padding: 3px 5px;
}
.mti__fw-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.mti__fw-lbl {
  font-size:var(--mti-fs);
  color: #444;
}
.mti__fw-pts {
  font-size:var(--mti-fs);
  font-weight: 700;
  color: #3a5cbf;
  margin-left: 4px;
  white-space: nowrap;
}
.mti__fw-pts small { font-weight: 400; font-size:var(--mti-fs); }

/* --- Bonus tooltip --- */
.mti__bonus-tip {
  position: fixed;
  z-index: 10000;
  max-width: 220px;
  background: #222;
  color: #fff;
  font-size:var(--mti-fs);
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  pointer-events: none;
}

/* --- Bonus modal overlay --- */
.mti__bonus-overlay {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.mti__bonus-overlay--in { opacity: 1; }

.mti__bonus-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 480px;
  width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
.mti__bonus-modal h3 {
  font-size:var(--mti-fs);
  font-weight: 700;
  margin: 0;
  text-align: center;
}
.mti__bonus-modal p {
  font-size:var(--mti-fs);
  margin: 0;
  text-align: center;
  color: #555;
}
.mti__bonus-modal-hero {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mti__bonus-section {
  width: 100%;
}
.mti__bonus-section strong {
  display: block;
  font-size:var(--mti-fs);
  margin-bottom: 6px;
  color: #333;
}
.mti__mitem-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.mti__mitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  min-width: 72px;
  transition: border-color .15s, background .15s;
  position: relative;
}
.mti__mitem:hover { border-color: #6c8cff; background: #f0f4ff; }
.mti__mitem--sel { border-color: #3a5cbf !important; background: #e6edff !important; }
.mti__mitem-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.mti__mitem-label {
  font-size:var(--mti-fs);
  text-align: center;
  color: #444;
  line-height: 1.2;
}
.mti__mitem-pts {
  font-size:var(--mti-fs);
  font-weight: 700;
  color: #3a5cbf;
}
.mti__mitem--word { min-width: 90px; flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: center; }
.mti__mitem--word .mti__mitem-label { flex: 1; min-width: 0; }

.mti__bonus-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 12px 0 4px;
  margin-top: 4px;
  box-shadow: 0 -8px 12px -6px rgba(0,0,0,.12);
  z-index: 2;
}
.mti__btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size:var(--mti-fs);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.mti__btn:disabled { opacity: .4; cursor: default; }
.mti__btn--ok { background: #3a5cbf; color: #fff; }
.mti__btn--ok:hover:not(:disabled) { background: #2a4aaf; }
.mti__btn--ghost { background: #f0f0f0; color: #555; }
.mti__btn--ghost:hover { background: #e0e0e0; }

/* drag ghost for bonus */
.mti-drag-ghost--bonus {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: rgba(255,248,231,.9);
  border: 2px solid #f0c040;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* — MP Scorebar — */
.mti__mp-scorebar { display:flex; align-items:center; justify-content:center; gap:14px; background:transparent; padding:18px 8px 8px; margin:0 auto 6px; font-size:var(--mti-fs); border-radius:0; }
.mti__mp-player-card { position:relative; display:flex; align-items:center; padding:8px 22px 8px 9px; border-radius:50px; background:transparent; transition:box-shadow .2s,background .2s; }
.mti__mp-player-card--active { background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.12); }
.mti__mp-turn-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:#F5A623; color:#fff; font-size:var(--mti-fs); font-weight:700; padding:3px 11px; border-radius:20px; white-space:nowrap; pointer-events:none; }
.mti__mp-player-inner { display:flex; align-items:center; gap:10px; }
.mti__mp-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--mti-fs); font-weight:700; flex-shrink:0; }
.mti__mp-player-info { display:flex; flex-direction:column; gap:1px; }
.mti__mp-player-name { font-weight:700; font-size:var(--mti-fs); line-height:1.2; }
.mti__mp-player-pts { font-size:var(--mti-fs); font-weight:600; line-height:1.2; }
.mti__mp-vs { font-size:var(--mti-fs); color:#aaa; font-weight:600; }
.mti__mp-scorebar-name { font-weight: 700; }
.mti__mp-scorebar-pts  { font-weight: 400; }

/* — Drag over assembly slots — */
.mti__piece--drag-over {
  outline: 3px dashed var(--orange);
  outline-offset: -3px;
  background: rgba(226,125,96,.12);
  transition: background .15s;
}

/* — Draw button (below pile) — */
.mti__btn--draw {
  display: block;
  margin: 6px auto 0;
  padding: 6px 14px;
  font-size:var(--mti-fs);
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.mti__btn--draw:hover { background: var(--orange-dk); }

/* ── MP top row ── */
.mti__board.mti--mp-hand { display:flex; flex-direction:column; align-items:stretch; gap:0; }
.mti__mp-top-row { display:flex; flex-direction:row; align-items:flex-start; gap:8px; justify-content:center; padding:8px 0; width:100%; }
.mti__mp-top-row .mti__piece { flex:1; max-width:120px; min-width:76px; }
.mti__mp-top-row .mti__pile-area { max-width:30%; width:100%; }

/* ── Pile area ── */
.mti__pile-area { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:80px; max-width:100px; }
.mti__pile-card { width:80px; aspect-ratio:63/88; border-radius:10px; object-fit:cover; cursor:pointer; box-shadow:4px 8px 16px rgba(0,0,0,.2); transition:transform .15s,opacity .2s; display:block; }
.mti__pile-card:hover:not([style*="pointer-events:none"]) { transform:translateY(-3px) scale(1.04); }
.mti__pile-card--empty { background:#d8d8d8; display:flex; align-items:center; justify-content:center; font-size:var(--mti-fs); }
.mti__pile-count { font-size:var(--mti-fs); color:rgba(255,255,255,.8); font-weight:600; }
.mti__pile-count strong { color:#fff; }
.mti__pile-area .mti__btn--draw { font-size:var(--mti-fs); padding:4px 10px; margin-top:2px; }

/* ── Assembly MP ── */
.mti__assembly--mp { width:100% !important; padding:4px 0 !important; gap:6px !important; justify-content:center; margin:20px auto 0; }

/* ── Scorebar ── */
.mti__mp-scorebar { display:flex; justify-content:center; align-items:center; gap:10px; padding:5px 10px; background:none; border-radius:20px; margin:0 auto 20px !important; font-size:var(--mti-fs); font-weight:600; width:fit-content; }
.mti__mp-scorebar-player { padding:3px 10px; border-radius:12px; color:rgba(255,255,255,.7); transition:background .2s,color .2s; }
.mti__mp-scorebar-player--active { background:rgba(255,255,255,.22); color:#fff; font-weight:700; }
.mti__mp-scorebar-sep { opacity:.4; color:#fff; font-size:var(--mti-fs); }

/* ── Formed words full width ── */
.mti__formed-words-zone { width:100%; padding:8px 0 4px; }
.mti__mp-hand-zone { width:100% !important; }

/* ── Shake pass button nudge ── */
@keyframes mti-shake-pass {
  0%,100%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-6px) rotate(-2deg)}
  30%{transform:translateX(6px) rotate(2deg)}
  45%{transform:translateX(-5px) rotate(-1deg)}
  60%{transform:translateX(5px) rotate(1deg)}
  75%{transform:translateX(-3px)}
}
.mti--shake-pass {
  animation:mti-shake-pass .55s ease;
  border-color:var(--orange) !important;
  background:rgba(226,125,96,.25) !important;
}

/* --- bonus drop on pile zone --- */
.mti__pile-area.mti__pile-zone--over {
  outline: 3px solid #e6a800;
  border-radius: 8px;
  transform: scale(1.05);
  transition: transform .15s, outline .15s;
}

/* --- animation pioche --- */
@keyframes mtiCardAppear {
  from { opacity: 0; transform: translateY(18px) scale(0.82); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.mti__mp-hand-card--new {
  animation: mtiCardAppear 0.32s cubic-bezier(.22,.61,.36,1) both;
}

/* --- animation nouvelles cartes solo --- */
@keyframes mtiCardNewSolo {
  from { opacity: 0; transform: scale(0.87); }
  to   { opacity: 1; transform: scale(1); }
}
.mti--card-new {
  animation: mtiCardNewSolo 0.26s ease-out both;
}

/* --- animation absorb pile (bonus déposé) --- */
@keyframes mtiPileAbsorb {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.mti__pile--absorb {
  animation: mtiPileAbsorb 0.38s ease-out both;
}

/* --- animation retrait carte du slot --- */
@keyframes mtiSlotCleared {
  0%   { background: rgba(220,80,80,.18); transform: scale(1.04); }
  100% { background: transparent;         transform: scale(1); }
}
.mti__piece.mti--slot-cleared {
  animation: mtiSlotCleared 0.28s ease-out;
}

/* placed card fade-in */
.mti__dc.mti--placed { transition: opacity 0.18s ease; }

/* hint button fade-in */
#mti-hint-btn { transition: opacity 0.35s ease; }

.mti__word-suf { color: #2ecc71; }

/* ═══════════════════════════════════════════
   REDESIGN MP BOARD v2
   ═══════════════════════════════════════════ */

/* ── Main 3-column layout ── */
.mti__mp-main {
  display: grid;
  grid-template-columns: 110px 1fr 220px;
  gap: 12px;
  align-items: start;
  padding: 8px 16px 12px;
  width: 100%; box-sizing: border-box;
}

/* ── Pile ── */
.mti__pile-area {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  padding-left: 32px; /* room for left fan overflow */
}
.mti__pile-stack {
  position: relative;
  width: 80px; height: 112px;
  cursor: pointer;
  overflow: visible;
}
.mti__pile-bg,
.mti__pile-top {
  position: absolute; top: 0; right: 0;
  width: 80px; height: 112px;
  border-radius: 12px; overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
  background: #c8956c;
}
.mti__pile-bg img, .mti__pile-top img,
.mti__pile-bg div, .mti__pile-top div {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Fan to the left: bg--3 = furthest left */
.mti__pile-bg--3 { transform: translateX(-28px) rotate(-5deg); z-index: 1; }
.mti__pile-bg--2 { transform: translateX(-18px) rotate(-3deg); z-index: 2; }
.mti__pile-bg--1 { transform: translateX(-9px)  rotate(-1.5deg); z-index: 3; }
.mti__pile-top   { transform: none; z-index: 4; }
/* Count badge overlapping top-card bottom-right */
.mti__pile-count-wrap {
  position: absolute;
  bottom: -10px; right: -10px;
  background: white; border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size:var(--mti-fs); color: #222;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 10;
}
.mti__btn--draw {
  background: #cf4156 !important; color: #fff !important;
  border: none; padding: 8px 16px; border-radius: 20px;
  font-weight: 800; font-size:var(--mti-fs); cursor: pointer;
  box-shadow: 0 3px 10px rgba(231,76,60,.4);
  transform: rotate(-3deg);
  transition: transform .12s, box-shadow .12s;
  align-self: center;
}
.mti__btn--draw:hover { transform: rotate(-3deg) translateY(-2px); box-shadow: 0 5px 14px rgba(231,76,60,.5); }
.mti__btn--draw:disabled { opacity: .45; transform: rotate(-3deg); }
/* Idle shake animation */
@keyframes mtiPileShake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  15%     { transform: translateX(-4px) rotate(-2deg); }
  30%     { transform: translateX(4px)  rotate(2deg); }
  45%     { transform: translateX(-3px) rotate(-1.5deg); }
  60%     { transform: translateX(3px)  rotate(1.5deg); }
  75%     { transform: translateX(-2px) rotate(-1deg); }
  90%     { transform: translateX(2px)  rotate(1deg); }
}
.mti__pile-stack--shake {
  animation: mtiPileShake .65s cubic-bezier(.36,.07,.19,.97) both;
}

/* ── Center drop zones ── */
.mti__mp-center {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; justify-content: flex-start; padding-top: 4px;
}
.mti__mp-drop-zones {
  display: flex; align-items: stretch; gap: 10px;
  justify-content: center; width: 100%;
}
.mti__mp-plus {
  font-size:var(--mti-fs); font-weight: 900; color: #aaa;
  align-self: center; flex-shrink: 0;
}
.mti__mp-drop-hint {
  font-size:var(--mti-fs); color: #aaa; text-align: center;
  background: rgba(255,255,255,.65); border-radius: 20px;
  padding: 4px 16px; margin: 0;
}

/* ── Pieces (drop slots) ── */
.mti--mp-hand .mti__piece {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 12px 8px;
  border-radius: 16px; min-height: 110px; text-align: center;
  flex: 1; min-width: 80px; transition: background .2s, border-color .2s;
  background: rgba(255,255,255,.5);
}
.mti--mp-hand .mti__piece--rad { border: 2px dashed #3498DB; }
.mti--mp-hand .mti__piece--suf { border: 2px dashed #E87050; }
.mti--mp-hand .mti__piece.filled { border: none; background: white; }
.mti__piece-paw { display:none; }
.mti--mp-hand .mti__piece-type { font-size:var(--mti-fs); font-weight: 900; color: #3498DB; }
.mti--mp-hand .mti__piece--suf .mti__piece-type { color: #E87050; }
.mti--mp-hand .mti__piece-ph { font-size:var(--mti-fs); color: #aaa; }

/* ── Word panel (right column) ── */
.mti__mp-word-panel {
  background: white; border-radius: 20px;
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);

}
.mti__mp-found-badge {
  background: #3498DB; color: white;
  font-size:var(--mti-fs); font-weight: 900; letter-spacing: .06em;
  padding: 4px 14px; border-radius: 20px;
}
.mti--mp-hand .mti__combo-word {
  font-size:var(--mti-fs); font-weight: 900; text-align: center; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.mti--mp-hand .mti__btn--ok {
  position: relative; width: 100%;
  padding: 13px 16px; border-radius: 50px; border: none;
  background: #3498DB; color: white;
  font-size:var(--mti-fs); font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0;
  box-shadow: 0 6px 18px rgba(52,152,219,.4);
  transition: transform .12s, opacity .2s;
}
.mti--mp-hand .mti__btn--ok:disabled {
  opacity: .35; cursor: default; box-shadow: none;
}
.mti__val-spark {
  font-size:var(--mti-fs); color: rgba(255,255,255,.85); pointer-events: none; letter-spacing: 1px;
}
.mti__val-spark--l { margin-right: 5px; }
.mti__val-spark--r { margin-left: 5px; }
#mti-validate:not(:disabled) .mti__val-spark {
  animation: mtiSparkPulse 1.1s ease-in-out infinite alternate;
}
@keyframes mtiSparkPulse {
  0%   { opacity: .3; transform: scale(.8);  }
  100% { opacity: 1;  transform: scale(1.2); }
}
.mti--mp-hand .mti__btn--ghost {
  background: #f2ede8; color: #888; border: none;
  padding: 10px 16px; border-radius: 50px; font-weight: 700;
  font-size:var(--mti-fs); cursor: pointer; width: 100%;
  transition: background .12s;
}
.mti--mp-hand .mti__btn--ghost:hover { background: #e8e2db; }

/* ── Hand cards ── */
.mti__mp-hand-zone {
  display: flex; justify-content: center; align-items: flex-end;
  flex-wrap: nowrap; padding: 8px 16px 6px;
  gap: 0;
}
.mti__mp-hand-card {
  position: relative; flex-shrink: 0;
  width: 130px; height: 175px; /* aspect-ratio: 63/88; */
  border-radius: 14px;
  border: 3px solid white;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  transition: transform .18s cubic-bezier(.34,1.3,.64,1), box-shadow .18s, z-index 0s;
  margin: 0 -6px;
}
.mti__mp-hand-card:hover:not(.mti--placed) {
  transform: rotate(var(--rot, 0deg)) translateY(-14px) scale(1.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  z-index: 20;
  margin: 0 -4px;
}
.mti__mp-hand-card--bonus {
  border-color: #f0c040;
  box-shadow: 0 4px 14px rgba(200,160,0,.35), 0 0 0 1px #e8b000;
}
.mti--placed { opacity: .38; pointer-events: none; filter: grayscale(.5); }
.mti__hc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
.mti__hc-pts {
  position: absolute; top: 3px; left: unset; right: 4px; z-index: 6;
  background: #f4ba42; color: #ffffff;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size:var(--mti-fs); font-weight: 900;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.mti__hc-banner {
  position: absolute; bottom: -46px; left: 0; right: 0; z-index: 5;
  background: none;
  padding: 4px 6px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.mti__mp-hand-card:hover .mti__hc-banner {
  opacity: 1;
  transform: translateY(0);
}
.mti__hc-label { display: none; }
.mti__mp-hand-card--bonus .mti__hc-label { display: none; }
.mti__mp-hand-card--rad .mti__hc-pts,
.mti__mp-hand-card--suf .mti__hc-pts { display: none; }
.mti__hc-pill {
  display: none;
}
.mti__hc-pill--rad { background: #3498DB; color: white; }
.mti__hc-pill--suf { background: #E87050; color: white; }
.mti__hc-pill--bonus { background: #f0c040; color: #333; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .mti__mp-main {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 8px; padding: 6px 8px;
  }
  .mti__mp-word-panel {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    padding: 10px 12px; gap: 8px;
  }
  .mti__mp-found-badge { display: none; }
  .mti__mp-hand-card { width: 68px; }
}

/* ── Solo timer ── */
.mti__solo-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #444;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.mti__solo-timer--urgent {
  color: #cf4156;
  animation: mti-timer-pulse .8s ease-in-out infinite;
}
@keyframes mti-timer-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .5; }
}