/* Pick & Pass - main menu (index.html). Classes are prefixed mn-; the base look comes from play.css. */
body.mn-body { display: block; overflow-y: auto; height: auto; min-height: 100%; }
.mn-wrap { max-width: 1100px; margin: 0 auto; padding: 22px 20px 60px; display: grid; gap: 22px; }
.mn-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mn-logo { margin: 0; font-size: 54px; font-weight: 900; letter-spacing: 1px; color: var(--pl-gold); text-shadow: 0 3px 0 #000, 0 0 30px rgba(230, 194, 90, .4); }
.mn-logo i { font-style: normal; color: #fff; opacity: .85; }
.mn-player { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 24px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); }
.mn-player b { font-size: 18px; }
.mn-player a { color: var(--pl-dim); font-size: 12px; cursor: pointer; text-decoration: underline; }
.mn-player small { color: var(--pl-dim); font-size: 11px; }

.mn-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.mn-fan { --s: .9; position: relative; height: calc(270px * var(--s) + 100px); overflow: hidden; z-index: 0; }
.mn-fan > div { position: absolute; left: 50%; bottom: 56px; width: 190px; height: 270px; margin-left: -95px; transform-origin: 50% 100%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65)); transition: transform .4s var(--pl-ease); }
.mn-fan > div:nth-child(1) { transform: rotate(-16deg) translateX(calc(-70px * var(--s))) scale(var(--s)); }
.mn-fan > div:nth-child(2) { transform: translateY(calc(-12px * var(--s))) scale(var(--s)); z-index: 2; }
.mn-fan > div:nth-child(3) { transform: rotate(16deg) translateX(calc(70px * var(--s))) scale(var(--s)); }
.mn-fan:hover > div:nth-child(1) { transform: rotate(-22deg) translateX(calc(-90px * var(--s))) scale(var(--s)); }
.mn-fan:hover > div:nth-child(3) { transform: rotate(22deg) translateX(calc(90px * var(--s))) scale(var(--s)); }
.mn-actions { display: grid; gap: 14px; position: relative; z-index: 1; }
.mn-big {
  display: grid; gap: 4px; text-align: left; cursor: pointer; padding: 18px 24px; border-radius: 16px; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 4px 0 rgba(0, 0, 0, .55), 0 14px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .15s var(--pl-ease), filter .15s;
}
.mn-big b { font-size: 26px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.mn-big small { font-size: 13px; opacity: .85; font-weight: 500; }
.mn-big:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.mn-big:active:not(:disabled) { transform: translateY(2px); }
.mn-big:disabled { opacity: .45; cursor: not-allowed; }
.mn-green { background: linear-gradient(180deg, #3f9f68, #1f6b40); }
.mn-blue { background: linear-gradient(180deg, #4a7fdc, #27479a); }
.mn-gold { background: linear-gradient(180deg, #f3d77c, #c59326); color: #2a1a02; border-color: #fff0a8; }
.mn-gold b { text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.mn-msg { min-height: 20px; color: var(--pl-amber); font-weight: 600; }
.mn-msg.err { color: var(--pl-red); }
.mn-last { color: #b9c4e6; font-size: 13px; }

.mn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mn-card { padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(26, 31, 52, .92), rgba(13, 16, 29, .94)); border: 1px solid #343a5c; display: grid; gap: 10px; align-content: start; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.mn-ch { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; color: var(--pl-gold); }
.mn-dim { color: var(--pl-dim); font-size: 12px; }
.mn-wallet { display: flex; gap: 14px; flex-wrap: wrap; }
.mn-wal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 22px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); font-size: 26px; font-weight: 900; }
.mn-wal small { font-size: 12px; color: var(--pl-dim); font-weight: 600; }
.mn-rating { font-size: 46px; font-weight: 900; color: var(--pl-text); line-height: 1; }
.mn-rating small { font-size: 13px; color: var(--pl-dim); font-weight: 600; margin-left: 8px; }

.mn-purple { background: linear-gradient(180deg, #9a62d6, #5a2f9a); }
.mn-link { color: #b9c4e6; font-size: 13px; cursor: pointer; justify-self: start; }
.mn-seasonline { color: var(--pl-dim); font-size: 13px; text-align: right; margin-bottom: -10px; }
.mn-rank { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 900; line-height: 1.1; }
.mn-rank small { display: block; font-size: 12px; color: var(--pl-dim); font-weight: 600; }
.mn-rank .tier-badge { flex: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
.mn-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 4px; }
.mn-bar i { display: block; height: 100%; background: var(--pl-gold); }
.mn-warn { color: var(--pl-amber); font-size: 12px; font-weight: 700; }
.mn-sumrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pl-line); }
.mn-sumrow:first-child { border-top: 0; }
.mn-lb { width: 100%; border-collapse: collapse; font-size: 13px; }
.mn-lb td, .mn-lb th { padding: 4px 6px; text-align: left; border-top: 1px solid var(--pl-line); }
.mn-lb tr.you td { color: var(--pl-gold); font-weight: 800; }
.mn-tools select { padding: 6px; background: #0b0e19; border: 1px solid var(--pl-line); color: inherit; border-radius: 7px; }
.mn-tools { border: 1px dashed #4a5280; border-radius: 12px; padding: 8px 14px; background: rgba(0, 0, 0, .25); }
.mn-tools summary { cursor: pointer; color: var(--pl-dim); font-weight: 700; }
.mn-toolbody { display: grid; gap: 12px; padding-top: 12px; }
.mn-trow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mn-trow label { display: inline-flex; align-items: center; gap: 6px; color: var(--pl-dim); font-size: 12px; }
.mn-trow input, #mn-nameinput { padding: 7px 9px; border-radius: 7px; background: #0b0e19; border: 1px solid var(--pl-line); width: 90px; }

.mn-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(4, 5, 10, .78); backdrop-filter: blur(4px); padding: 16px; }
.mn-dialog { width: min(520px, 100%); padding: 22px 24px; border-radius: 18px; background: linear-gradient(180deg, #1b2038, #0f1322); border: 1px solid var(--pl-gold2); box-shadow: 0 24px 60px rgba(0, 0, 0, .75); display: grid; gap: 14px; }
.mn-dialog h2 { margin: 0; color: var(--pl-gold); letter-spacing: .04em; }
#mn-nameinput { width: 100%; font-size: 18px; }
.mn-actionsrow { display: flex; justify-content: flex-end; gap: 10px; }
.mn-lobbytop { display: flex; align-items: center; gap: 16px; }
.mn-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mn-seat { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--pl-line); font-weight: 700; min-height: 40px; }
.mn-seat i { width: 10px; height: 10px; border-radius: 50%; background: var(--pl-green); flex: none; }
.mn-seat.empty { color: var(--pl-dim); font-weight: 500; border-style: dashed; }
.mn-seat.empty i { background: #4a5063; }
.mn-seat.you { border-color: var(--pl-gold); color: var(--pl-gold); }

@media (max-width: 860px) {
  .mn-hero { grid-template-columns: minmax(0, 1fr); }
  .mn-fan { --s: .8; }
  .mn-stats { grid-template-columns: minmax(0, 1fr); }
  .mn-logo { font-size: 40px; }
}
@media (max-width: 480px) {
  .mn-fan { --s: .66; }
  .mn-wrap { padding-left: 14px; padding-right: 14px; }
}

.mn-teal { background: linear-gradient(180deg, #22a7a0, #0f6a73); }