/* SPEC: 2026-01-08 Stage142 Patch150 */
/* TriFront My Page (Profile / Rated Stats) */

:root{
  --mp-bg: rgba(10,12,16,0.72);
  --mp-card: #111822;
  --mp-bd: #253244;
  --mp-txt: #dfe7f4;
  --mp-muted: #9fb2cc;
  --mp-accent: #3aa0ff;
  --mp-accent-weak: rgba(58,160,255,0.15);
}

#myPageModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: radial-gradient(1200px 1200px at 50% 50%, var(--mp-bg), transparent 70%);
  backdrop-filter: blur(2px);
  overscroll-behavior: none;
}

#myPageModal.on{ display:flex; }

.mypage-card{
  width: min(680px, 92vw);
  max-height: min(78vh, 760px);
  background: var(--mp-card);
  color: var(--mp-txt);
  border: 1px solid var(--mp-bd);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mypage-head{
  padding: 14px 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--mp-bd);
  display: flex;
  align-items: center;
  gap: 10px;
}

.mypage-head .title{ flex: 1; }

.mypage-body{
  padding: 16px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  line-height: 1.6;
}

.mypage-row{ margin: 10px 0 14px; }

.mypage-cap{ margin-bottom: 6px; color: var(--mp-muted); }

.mypage-inline{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mypage-input{
  flex: 1;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--mp-bd);
  background: #0c141e;
  color: var(--mp-txt);
  outline: none;
}

.mypage-input:focus{
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 2px var(--mp-accent-weak);
}

/* Stage164: bucket selector (mode / envKey) */
.mypage-select{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--mp-bd);
  background: #0c141e;
  color: var(--mp-txt);
  outline: none;
}
.mypage-select:focus{
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 2px var(--mp-accent-weak);
}
.mypage-envkey{
  flex: 0 0 180px;
  min-width: 140px;
}

.mypage-muted{
  color: var(--mp-muted);
  font-size: 12px;
  word-break: break-word;
  white-space: normal;
}

.mypage-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* Auth bar (Login / Logout) */
.mypage-authbar{
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--mp-bd);
  border-radius: 12px;
  background: rgba(12,20,30,0.55);
}
.mypage-authbar-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.mypage-authstatus{
  color: var(--mp-muted);
  font-size: 13px;
}
.mypage-authbtns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mypage-authbtns .btn{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
}

@media (max-width: 520px){
  .mypage-grid{ grid-template-columns: 1fr; }
}

.mypage-stat{
  border: 1px solid var(--mp-bd);
  border-radius: 12px;
  padding: 10px 12px;
  background: #0e1520;
}

.mypage-stat .k{ color: var(--mp-muted); font-size: 12px; }
.mypage-stat .v{ font-size: 22px; font-weight: 800; margin-top: 4px; }

.mypage-foot{
  padding: 12px 16px;
  border-top: 1px solid var(--mp-bd);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: #0e1520;
}

/* Button styles reuse the settings palette if present; provide safe defaults */
#myPageModal .btn{
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--mp-bd);
  background: #0c141e;
  color: var(--mp-txt);
  cursor: pointer;
}
#myPageModal .btn:hover{ filter: brightness(1.1); }
#myPageModal .btn.primary{ border-color: var(--mp-accent); background: #132235; }
#myPageModal .btn.ghost{ background: transparent; }

/* Ranking / Leaderboard */
.mypage-ranklist{
  margin-top: 8px;
  border: 1px solid var(--mp-bd);
  border-radius: 12px;
  overflow: hidden;
  background: #0e1520;
}

.mypage-rankitem{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--mp-bd);
}
.mypage-rankitem:first-child{ border-top: 0; }

.mypage-rankpos{
  width: 2.6em;
  text-align: right;
  color: var(--mp-muted);
  font-weight: 900;
}

.mypage-rankname{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.mypage-rankscore{
  font-weight: 900;
}

.mypage-rankmeta{
  margin-left: 8px;
  color: var(--mp-muted);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 420px){
  .mypage-rankmeta{ display:none; }
}

/* Stage860: My Page background */
.mypage-card{
  background:
    linear-gradient(180deg, rgba(6,9,14,.58) 0%, rgba(7,10,16,.70) 42%, rgba(6,8,13,.82) 100%),
    url("img/ui/mypage_bg.jpg?v=20260711-860") center/cover no-repeat;
}
.mypage-head,
.mypage-body{
  position:relative;
  z-index:1;
}
.mypage-authbar,
.mypage-row,
.mypage-grid > *,
.mypage-rankitem{
  background-color:rgba(8,12,18,.84);
}