/* =========================================================
   Ομάδα «Με συμπαίκτη» — παιχνίδια για 2–4 παιδιά στον ίδιο υπολογιστή
   ========================================================= */

/* ---- Γενικό πλαίσιο: πίνακας σκορ πάνω, παιχνίδι κάτω ---- */
.mp-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow: hidden; }
.mp-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 24px; }
.mp-inner { position: relative; z-index: 1; flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }

/* ---- Πίνακας παικτών (chips) ---- */
#mp-bar { z-index: 1; }
.mp-bar { z-index: 1; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mp-chip {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.85); border-radius: 22px; padding: 4px 14px 4px 6px;
  font-weight: 700; font-size: 17px; color: #37474f; border: 3px solid transparent; box-shadow: 0 3px 0 rgba(0,0,0,.08);
  transition: transform .15s, box-shadow .15s;
}
.mp-chip svg { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 3px var(--c); flex: none; }
.mp-chip .n { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-chip .s { background: var(--c); color: #fff; padding: 2px 10px; border-radius: 12px; min-width: 22px; text-align: center; }
.mp-chip .k { font-size: 13px; color: #78909c; }
.mp-chip.on { border-color: var(--c); transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 6px 14px rgba(0,0,0,.15); }
.mp-chip.on::before { content: '▶'; color: var(--c); font-size: 14px; }
.mp-chip.out { opacity: .55; }
.mp-bar.dark .mp-chip { background: rgba(255,255,255,.14); color: #fff; }
.mp-bar.dark .mp-chip .k { color: #b0bec5; }
.mp-msg { z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-weight: 700; font-size: 19px; color: #37474f; background: rgba(255,255,255,.85); padding: 5px 18px; border-radius: 16px; align-self: center; min-height: 24px; }

/* ---- Οθόνη προετοιμασίας: παίκτες & επιλογές ---- */
.mp-setup { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 12px; }
.mp-setup-box {
  z-index: 1; background: rgba(255,255,255,.94); border-radius: 28px; padding: 16px 26px 20px; width: min(780px, 100%);
  display: flex; flex-direction: column; gap: 10px; align-items: center; box-shadow: 0 16px 40px rgba(0,0,0,.18); box-sizing: border-box;
}
.mp-setup-box h2 { margin: 0; font-size: 28px; color: #37474f; }
.mp-setup-box .big-btn { margin-top: 4px; }
.mp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mp-lbl { font-weight: 700; color: #607d8b; font-size: 17px; }
.mp-choices { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mp-choice { font-family: inherit; font-weight: 700; font-size: 16px; padding: 5px 14px; border-radius: 14px; border: 3px solid #cfd8dc; background: #fff; color: #455a64; cursor: pointer; transition: transform .1s; }
.mp-choice:hover { transform: scale(1.06); }
.mp-choice.sel { background: #ff8f00; border-color: #ff8f00; color: #fff; box-shadow: 0 3px 0 #e65100; }
.mp-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: 100%; }
.mp-pl { display: flex; flex-direction: column; align-items: center; gap: 6px; background: color-mix(in srgb, var(--c) 12%, #fff); border: 3px solid var(--c); border-radius: 20px; padding: 10px; }
.mp-pl .mp-av { position: relative; }
.mp-pl .mp-av svg { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 4px var(--c); display: block; }
.mp-pl .mp-dice { position: absolute; right: -10px; bottom: -4px; font-size: 17px; border: 2px solid #fff; background: #fff; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); padding: 0; }
.mp-pl .mp-dice:hover { transform: scale(1.15) rotate(20deg); }
.mp-pl input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 17px; font-weight: 700; text-align: center; border: 2px solid #cfd8dc; border-radius: 12px; padding: 5px 8px; color: #37474f; }
.mp-pl input:focus { outline: none; border-color: var(--c); }
.mp-pl .tok { font-size: 13px; font-weight: 700; color: var(--c); }

/* ---- Μεγάλο μήνυμα («Σειρά: Μαρία!») ---- */
.mp-toast {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 15; pointer-events: none;
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.96); color: #37474f; font-weight: 700; font-size: 28px;
  padding: 12px 28px; border-radius: 24px; box-shadow: 0 12px 30px rgba(0,0,0,.25); border: 4px solid var(--c, #ff8f00);
  animation: mp-toast 1.4s forwards;
}
.mp-toast svg { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 3px var(--c, #ff8f00); }
@keyframes mp-toast {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(.9); }
}

/* ---- «Κουρτίνα»: κρύβει τον πίνακα μέχρι να πατήσει ο επόμενος παίκτης ---- */
.mp-curtain { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(40,20,60,.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.mp-curtain-box { background: #fff; border-radius: 28px; padding: 22px 36px 24px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: popin .4s; max-width: 480px; border-top: 12px solid var(--c); }
.mp-curtain-box svg { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 5px var(--c); }
.mp-curtain-box h3 { margin: 10px 0 4px; font-size: 28px; color: #37474f; }
.mp-curtain-box p { margin: 0 0 14px; font-size: 18px; color: #607d8b; }
.mp-curtain-box .keys { display: inline-flex; gap: 4px; margin: 0 4px; }
.mp-curtain-box kbd, .mp-keys kbd { font-family: inherit; font-weight: 700; background: #eceff1; border: 2px solid #b0bec5; border-bottom-width: 4px; border-radius: 6px; padding: 1px 7px; font-size: 15px; color: #37474f; }

/* ---- Σκυταλοδρομία: χρόνος & σκορ πάνω από το παιχνίδι ---- */
.mp-hud { z-index: 1; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.88); border-radius: 18px; padding: 6px 14px; }
.mp-hud .mp-chip { padding-right: 10px; }
.mp-time { flex: 1; height: 18px; border-radius: 10px; background: #eceff1; overflow: hidden; border: 2px solid #cfd8dc; }
.mp-time i { display: block; height: 100%; background: linear-gradient(90deg, #66bb6a, #43a047); transition: width .1s linear; }
.mp-time.low i { background: linear-gradient(90deg, #ef5350, #d32f2f); }
.mp-hud .t { font-weight: 700; font-size: 22px; min-width: 44px; text-align: right; color: #37474f; }
.mp-hud .sc { font-weight: 700; font-size: 20px; background: var(--c); color: #fff; padding: 3px 14px; border-radius: 14px; }

/* ---- Αποτέλεσμα: κατάταξη ---- */
.mp-rank { display: flex; flex-direction: column; gap: 8px; margin: 8px auto 14px; max-width: 420px; }
.mp-rank div { display: flex; align-items: center; gap: 12px; background: #f5f7fb; border-radius: 16px; padding: 6px 14px; font-weight: 700; font-size: 20px; color: #37474f; border-left: 8px solid var(--c); }
.mp-rank div.win { background: #fff8e1; box-shadow: 0 0 0 3px #ffd54f; }
.mp-rank svg { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px var(--c); flex: none; }
.mp-rank .n { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-rank .s { background: var(--c); color: #fff; padding: 2px 12px; border-radius: 12px; white-space: nowrap; }
.modal .mp-rank + div .big-btn { font-size: 20px; padding: 10px 20px; }

/* ---- Προσαρμογές ανά παιχνίδι ---- */
/* Σκορ 4: το 2ο πούλι είναι μπλε (χρώμα του 2ου παίκτη) */
.mp-body .c4-board { width: min(560px, 60vw, 64vh); }
.mp-wrap .c4-disc.p2 { background: radial-gradient(circle at 35% 30%, #82b1ff, #1565c0); }
.mp-body .ttt-board { width: min(420px, 60vw, 58vh); }
/* Μνήμη */
.mp-body .mem-area { width: 100%; height: 100%; }
.mp-mem-cards { position: absolute; left: 6px; top: 6px; font-size: 22px; pointer-events: none; }
/* Ντόμινο */
.mp-dm-chain { flex: 1; min-height: 0; }
.mp-dm-hand .dm-tile.mine { opacity: 1; }
.mp-dm-hand .dm-tile.mine.no { opacity: .45; }
.dm-row.mp-dm-hidden #dm-hand { display: none; }
.mp-wrap .dm-row { z-index: 1; }
.mp-dm-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
/* Θησαυρός */
.mp-wrap .tr-grid { flex: 1; min-height: 0; }
/* Διαφορές */
.mp-wrap .df-pics { z-index: 1; }
/* Λαβύρινθος */
.mp-body .lm-board { width: min(64vh, 62vw, 720px); }
.mp-keys { z-index: 1; display: flex; flex-direction: column; gap: 10px; align-items: center; background: rgba(255,255,255,.85); padding: 12px 16px; border-radius: 20px; font-weight: 700; color: #37474f; }
.mp-keys div { display: flex; align-items: center; gap: 8px; }
.mp-keys svg { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 3px var(--c); }
/* Κουίζ μονομαχία */
.qz-wrap.mp-quiz { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.mp-quiz .qz-main { flex: 1; }
.mp-quiz .qz-lifelines .qz-gradebadge { font-size: 16px; }
.mp-quiz .qz-answers { pointer-events: none; }
.mp-quiz .qz-answers.live { pointer-events: auto; }

@media (max-width: 900px) {
  .mp-body { flex-direction: column; gap: 10px; }
  .mp-chip .n { max-width: 90px; }
}