/* /me: your profile, the app's Me tab (ProfileView.swift). Phone first: Settings and Edit sit over the card's top
   corners, then the card, the pink tape, the stats card, the feedback and your games. From 960px the card and the
   tape stay put on the left (m.css .lead) and the rest scrolls on the right (.stack). The card itself: account-card.css. */

/* ---------- the card and its two square buttons ---------- */

.profile__head { position: relative; padding-top: 58px; }

.sq {
  position: absolute; top: 0; z-index: 4; display: grid; place-items: center; width: 46px; height: 46px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--pink);
  transition: transform var(--fast) var(--pop), box-shadow var(--fast) var(--out), opacity var(--fast);
}
.profile__settings { left: 0; }
.profile__edit { right: 0; }
.sq:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pink); }
.sq:focus-visible { outline-color: var(--lime); }
.sq:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
@media (hover: hover) {
  .sq:not(:disabled):hover { transform: translateY(-2px) rotate(-4deg); box-shadow: 4px 5px 0 var(--pink); }
  .profile__edit:not(:disabled):hover { transform: translateY(-2px) rotate(4deg); }
}

/* While the profile loads: an empty card in its place, so nothing jumps when it lands. */
.profile__ghost {
  width: min(100%, 320px); aspect-ratio: 3 / 4; margin: 8px auto 30px; rotate: -2deg;
  clip-path: polygon(11% 0, 89% 0, 100% 8.25%, 100% 100%, 0 100%, 0 8.25%);
}

/* Room for the buttons beside the card once the screen is wide enough. */
@media (min-width: 440px) {
  .profile__head { padding: 4px 58px 0; }
}

/* The pink tape: position and city, where the app says Normal or Ranked. */
.profile__tape { margin-top: 4px; transform: rotate(-3deg) scale(1.04); }

/* ---------- the stats card ---------- */

.profile__stats { --shadow: var(--cyan); --tilt: 0.7deg; margin-top: 34px; padding: 20px 18px 18px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 12px; list-style: none; }
.stat { display: grid; align-content: start; gap: 7px; min-width: 0; }
.stat__value {
  font-family: var(--poster); font-weight: 900; font-stretch: 50%; font-size: clamp(26px, 8vw, 40px); line-height: 0.9;
  text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.stat__label { font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: rgba(16, 16, 20, 0.62); }

/* ---------- sections: feedback, your games ---------- */

.block { margin-top: 46px; }
.block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.block__title {
  font-family: var(--brand); font-weight: 800; font-size: clamp(22px, 6.4vw, 28px); line-height: 1.05; letter-spacing: -0.05em;
  text-transform: uppercase; color: var(--paper); text-shadow: -2px 2px 0 var(--pink);
}
.block__note { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.block__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime);
  text-decoration: underline; text-underline-offset: 4px;
}
.block__sub { margin-top: 20px; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
.block .skeleton--card { margin-top: 16px; }

/* A note pasted on the wall: a teammate's words, or the "nothing yet" line. */
.notes { display: grid; gap: 18px; margin-top: 16px; list-style: none; }
.note {
  position: relative; padding: 15px 16px 16px; color: var(--ink); background: var(--paper);
  border: var(--edge) solid var(--ink); box-shadow: 5px 5px 0 var(--cyan); rotate: -0.5deg;
}
.notes .note:nth-child(even) { rotate: 0.4deg; box-shadow: 5px 5px 0 var(--lime); }
.note--empty { margin-top: 16px; box-shadow: 5px 5px 0 var(--grape); rotate: -0.4deg; font-size: 14px; font-weight: 600; line-height: 1.45; }
.note__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.note__link { display: block; text-decoration: none; color: inherit; }
.note__link:focus-visible { outline-offset: 4px; }
.note__place { font-family: var(--brand); font-weight: 800; font-size: 14px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.note__when { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(16, 16, 20, 0.62); }
.note__quote { margin-top: 9px; font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.note .link { color: var(--ink); }
.note__retry { min-height: 44px; }
@media (hover: hover) { .note__link:hover .note__place { text-decoration: underline; text-underline-offset: 3px; } }

/* Your games: one paper card per list, rows split by a rule (m.css .mygames). */
.profile__games { --shadow: var(--lime); --tilt: 0.4deg; margin-top: 16px; padding: 8px 18px; }
.profile__games--past { --shadow: var(--grape); --tilt: -0.4deg; }
.profile__games .mygames a { min-height: 44px; }
.profile__games .mygames a[data-host] .mygames__when { color: var(--ink); }
@media (hover: hover) { .profile__games .mygames a:hover .mygames__name { text-decoration: underline; text-underline-offset: 4px; } }

/* "Load more", on the dark wall or inside a paper card. */
.more {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 14px 0 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper); border: 2px solid currentColor;
}
.card .more { color: var(--ink); }
.more:disabled { opacity: 0.6; cursor: progress; }

/* ---------- signed out, a new number, or the profile wouldn't load ---------- */

.profile__door { margin-top: 26px; }
.profile__door-kicker { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--alarm); }
.profile__door-title { margin-top: 8px; font-family: var(--brand); font-weight: 800; font-size: clamp(25px, 7.6vw, 34px); line-height: 1.04; letter-spacing: -0.055em; }
.profile__door .btn { margin-top: 22px; }

/* ---------- a laptop: the card on the left, the rest on the right ---------- */

@media (min-width: 960px) {
  .profile__head { padding: 0 64px; }
  .profile__head .pcard, .profile__ghost { width: min(100%, 340px); }
  .profile__tape { transform: rotate(-3deg); }
  .profile__stats { margin-top: 16px; padding: 24px 26px 22px; }
  .block { margin-top: 52px; }
  /* Nothing to put beside the card: one centred column. */
  main.profile:is([data-view="out"], [data-view="setup"], [data-view="trouble"]) {
    grid-template-columns: minmax(0, 560px); justify-content: center;
  }
}