/* Harita Yapbozu – map puzzle page. Phone first (390px wide, board + tray without scrolling), grows on tablets/desktops. */
body { background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); min-height: 100vh; }
.mp-hero .mp-lead { max-width: 760px; margin: 0 auto; opacity: .92; }
body[data-mp-phase="game"] .mp-hero { display: none; }   /* while playing, the board and the piece in hand share the phone screen */
.mp-card { border-radius: 22px; background: #fff; }
.mp-search { max-width: 240px; border-radius: 12px; }
.mp-cont { border-radius: 999px; }

/* country picker */
.mp-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mp-country { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 2px solid #e3e8ef; border-radius: 16px; background: #fafcff; text-align: start; cursor: pointer; transition: transform .12s, border-color .12s; }
.mp-country:hover, .mp-country:focus-visible { border-color: #185a9d; transform: translateY(-2px); outline: none; }
.mp-country .mp-flag { font-size: 1.6rem; line-height: 1; }
.mp-country .mp-cname { font-weight: 700; color: #1f2d3d; }
.mp-country .mp-cmeta { font-size: .78rem; color: #6c757d; }

/* setup */
.mp-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .mp-setup-grid { grid-template-columns: 1fr; } }
.mp-opt { border-radius: 14px; padding: 10px 12px; text-align: start; }
.mp-count { display: inline-block; min-width: 2.2em; padding: 0 .4em; border-radius: 999px; background: rgba(0,0,0,.12); font-size: .85em; text-align: center; margin-inline-start: .3em; }
.mp-back { border-radius: 12px; }

/* board */
.mp-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.mp-top-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-progress { font-variant-numeric: tabular-nums; }
.mp-bar { height: 6px; border-radius: 3px; background: #e9eef5; margin: 8px 0; overflow: hidden; }
.mp-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #43cea2, #185a9d); transition: width .3s; }
.mp-board-wrap { position: relative; width: 100%; max-height: min(50vh, 600px); aspect-ratio: var(--mp-ratio, 2 / 1); margin: 0 auto; touch-action: none; }
.mp-board { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.mp-slot { fill: #eef2f7; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .2s; }
.mp-slot.filled { fill: transparent; }
.mp-slot.mp-find { cursor: pointer; stroke: #fff; }
.mp-slot.mp-find:hover { filter: brightness(1.06); }
.mp-placed { stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.mp-placed.pop { animation: mp-pop .35s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes mp-pop { 0% { transform: scale(1.25); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.mp-label { fill: #1f2d3d; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.mp-hint { fill: rgba(255, 193, 7, .45); stroke: #ff9800; stroke-width: 2.5; vector-effect: non-scaling-stroke; animation: mp-blink .7s ease-in-out infinite alternate; pointer-events: none; }
@keyframes mp-blink { from { opacity: .35; } to { opacity: 1; } }
.mp-ghost { stroke: #1f2d3d; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .85; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }

/* toast over the board */
.mp-toast { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -8px); padding: 6px 14px; border-radius: 999px; background: rgba(31,45,61,.92); color: #fff; font-weight: 700; font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mp-toast.good { background: #2e7d32; }
.mp-toast.bad { background: #c62828; }
.mp-toast.help { background: #ef6c00; }
.mp-toast.ask { background: #185a9d; font-size: 1.05rem; }

/* the piece in hand */
.mp-tray { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 10px; border-radius: 18px; background: #f4f7fb; border: 2px dashed #cfd8e3; }
.mp-tray-piece { width: 104px; height: 104px; flex: 0 0 auto; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; transition: transform .12s, box-shadow .12s; }
.mp-tray-piece svg { width: 92px; height: 92px; }
.mp-tray-piece svg path { stroke: #1f2d3d; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mp-tray-piece.dragging { cursor: grabbing; opacity: .5; }
.mp-tray-piece.armed { box-shadow: 0 0 0 4px #43cea2; transform: scale(1.05); }
.mp-tray-piece.shake { animation: mp-shake .4s; }
@keyframes mp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.mp-tray-text { flex: 1 1 auto; min-width: 0; }
.mp-piece-name { font-size: 1.35rem; font-weight: 800; color: #1f2d3d; line-height: 1.15; }
.mp-dontknow { border-radius: 12px; flex: 0 0 auto; }
@media (max-width: 420px) { .mp-tray { flex-wrap: wrap; } .mp-dontknow { flex-basis: 100%; } .mp-tray-piece { width: 88px; height: 88px; } .mp-tray-piece svg { width: 78px; height: 78px; } .mp-piece-name { font-size: 1.2rem; } }

/* confetti */
#mpConfetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1050; }
.mp-cf { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: mp-fall linear forwards; }
@keyframes mp-fall { to { transform: translateY(105vh) rotate(720deg); opacity: .6; } }

/* crawlable guide */
.mp-seo { color: #37474f; }
.mp-seo h2 { color: #263238; }
.mp-seo-steps li, .mp-seo-levels li { margin-bottom: 8px; }
.mp-seo-countries { columns: 2; list-style: none; padding: 0; }
@media (min-width: 768px) { .mp-seo-countries { columns: 3; } }
.mp-seo-countries li { break-inside: avoid; margin-bottom: 4px; }
.mp-seo-countries a { text-decoration: none; font-weight: 600; color: #185a9d; }
.mp-seo-faq { padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; background: #f5f7fa; }
.mp-seo-faq summary { cursor: pointer; }