/* Me page: arranges the shared pieces. Order follows R18: who, streak, bests, saved, recent, actions. */
.me-h1 { margin-top: var(--s5); --twin: var(--vermilion); }
.me-grid .block:first-child { margin-top: var(--s5); }

.me-card { display: grid; gap: var(--s2); padding: var(--s4); background: var(--label); border: var(--keyline); border-radius: var(--r); box-shadow: var(--off) var(--off) 0 var(--indigo); }
.me-streak .me-card { box-shadow: var(--off) var(--off) 0 var(--vermilion); }
.me-name { font: 400 var(--t-xl)/1.1 var(--display); overflow-wrap: anywhere; }
.me-signin:empty, .me-signin[hidden] { display: none; }
.me-small { font-size: var(--t-xs); color: var(--ink-soft); font-weight: 600; }

.me-id { display: flex; align-items: center; gap: var(--s3); }
.me-id img { width: 56px; height: 56px; border: var(--keyline); border-radius: var(--r); object-fit: cover; }
.me-nick { display: grid; gap: 4px; margin-top: var(--s2); }
.me-nick label { font-weight: 800; }
.me-nick-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.me-nick-row .field { flex: 1 1 10rem; min-width: 0; }
.me-hint { font-size: var(--t-sm); }
.me-msg { font-weight: 800; min-height: 1.5em; }
.me-msg.is-error { color: var(--vermilion-d); }

/* Streak: a 14-day row of small squares, today last */
.me-streak-n { font: 400 var(--t-xl)/1.1 var(--display); }
.me-days { display: grid; grid-template-columns: repeat(14, minmax(0, 26px)); gap: 4px; }
.me-days span { aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 2px; background: var(--label); }
.me-days span.on { background: var(--vermilion); }
.me-days span.today { outline: 2px solid var(--ink); outline-offset: 2px; }
.me-days-ends { display: flex; justify-content: space-between; max-width: calc(14 * 26px + 13 * 4px); }

/* Bests: one keylined list, title links to the game, score in tabular numbers */
.me-best-list { list-style: none; margin: 0; padding: 0; background: var(--label); border: var(--keyline); border-radius: var(--r); box-shadow: var(--off) var(--off) 0 var(--turmeric); }
.me-best-list li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.me-best-list a { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s3); align-items: center; min-height: 56px; padding: 8px 12px; text-decoration: none; }
.me-best-list img { width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 2px; background: #fff; }
.me-best-list span { font-weight: 800; overflow-wrap: anywhere; }
.me-best-list b { font: 800 var(--t-lg)/1 var(--ui); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .me-best-list a:hover span { text-decoration: underline; text-underline-offset: 3px; } }

.me-none { padding: var(--s3) var(--s4); border: 2px dashed var(--ink); border-radius: var(--r); color: var(--ink-soft); }

.me-actions { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 2px dashed var(--ink); }
.me-confirm { font-weight: 800; }

@media (min-width: 900px) {
  .me-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s6); align-items: start; }
  .me-col > .block:first-child { margin-top: var(--s5); }
}