/* augh yahh! -- the Profile tab's front, screens, bag, and the Home members
   grid (round five, 2026-08-18 night). Loaded on profile and home. */

.small-mark { font-size: 1.3rem; margin-bottom: .2rem; }
.pscreen { width: 100%; display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }
.back { align-self: flex-start; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--cyan); text-decoration: none; padding: .2rem 0; }
.back .p-count { margin-left: .4rem; }

/* top card */
.topcard { display: flex; align-items: center; gap: 1.35rem; border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; background: #0D1420; position: relative; text-align: left; }
.topcard .p-face { margin: 0; flex: 0 0 5.2rem; width: 5.2rem; height: 5.2rem; display: flex; align-items: center; justify-content: center; }
.topcard .badge.lg { width: 4.6rem; height: 4.6rem; font-size: 1.9rem; }
/* the frame is drawn bigger than its slot on purpose, so it spills a little
   past the picture and never over the name */
.topcard .badge.lg.framed { width: 7.4rem; height: 7.4rem; margin: -1.1rem; }
.topcard .badge.lg.framed .face { font-size: 1.5rem; }
.tc-r { min-width: 0; flex: 1; position: relative; z-index: 4; }
.topcard .profile-name { font-size: 1.35rem; text-shadow: none; }
.tc-line { margin: .15rem 0 0; font-size: .85rem; color: var(--text-2); overflow-wrap: anywhere; }
.tc-since { margin: .3rem 0 0; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; color: var(--text-3); }
.tc-edit { position: absolute; right: .8rem; top: .7rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(33,230,255,.45); border-radius: 6px; padding: .25rem .55rem; text-decoration: none; }

/* the two tiles */
.tiles2 { display: flex; gap: .55rem; }
.tile2 { flex: 1; border-radius: 12px; padding: .8rem .85rem; display: flex; flex-direction: column; gap: .15rem; text-decoration: none; min-width: 0; }
.tile2 small { font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; }
.tile2 b { font-family: var(--mono); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.tile2 span { font-family: var(--mono); font-size: .62rem; opacity: .85; }
.tile2.gold { background: linear-gradient(135deg, rgba(255,228,92,.28), rgba(255,154,60,.16)); border: 1px solid rgba(255,228,92,.45); color: #FFE45C; box-shadow: 0 0 22px -10px rgba(255,228,92,.7); }
.tile2.violet { background: linear-gradient(135deg, rgba(157,107,255,.32), rgba(91,141,239,.16)); border: 1px solid rgba(157,107,255,.5); color: #E4D9FF; box-shadow: 0 0 22px -10px rgba(157,107,255,.7); }
.tile2 .bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin: .3rem 0 .15rem; }
.tile2 .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9D6BFF, #21E6FF); transition: width .5s ease; }

/* the icon row */
.icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.icons a { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .2rem .55rem; text-align: center; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); background: #0A0F17; text-decoration: none; }
.icons a i { display: block; font-style: normal; font-size: 1.5rem; margin-bottom: .25rem; }

/* the shop strip */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.strip-head a { color: var(--cyan); text-decoration: none; letter-spacing: .06em; text-transform: none; }
.strip { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .2rem; }
.strip .item { flex: 0 0 31%; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 10px; padding: .8rem .3rem; text-align: center; background: #0A0F17; text-decoration: none; font-weight: 700; font-size: 1rem; color: var(--text); }
.strip .item small { display: block; font-family: var(--mono); font-size: .56rem; color: var(--text-3); font-weight: 400; margin-top: .3rem; letter-spacing: .04em; }

/* the bag */
.k2 { margin: .2rem 0 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.grid3 > * { min-width: 0; }
.own { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .25rem .5rem; text-align: center; font: inherit; font-size: .74rem; color: var(--text); background: #0A0F17; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer; }
.own small { font-family: var(--mono); font-size: .56rem; color: var(--text-3); letter-spacing: .04em; }
.own.on { border-color: rgba(59,255,158,.6); box-shadow: 0 0 12px -4px rgba(59,255,158,.7); }
.own.on small { color: var(--green); }
.own.dim { opacity: .5; }
.own .badge.md.framed { margin: -.4rem 0; }

/* edit */
.ecard { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; background: #0D1420; }
.p-face-sm { display: flex; justify-content: center; }
.pscreen .p-more, .pscreen .btn, .pscreen .p-photo-row, .pscreen .p-about { width: 100%; }
.pscreen .p-about .btn { width: auto; flex: 0 0 auto; }
.pscreen .p-about .field { flex: 1 1 auto; min-width: 0; }

/* Home: the members grid */
.hrow { display: flex; align-items: center; gap: .4rem; width: 100%; min-width: 0; }
.hrow .mark { min-width: 0; overflow: hidden; }
.hrow .mark { margin: 0 auto 0 0; font-size: 1.4rem; }
.chip2 { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: .32rem .7rem; border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.chip2.lime { color: var(--lime); border-color: rgba(198,255,61,.5); text-shadow: 0 0 8px rgba(198,255,61,.5); }
.chip2.pink { color: var(--pink); border-color: rgba(255,61,166,.5); text-shadow: 0 0 8px rgba(255,61,166,.5); }
.chip2.vio { color: var(--violet); border-color: rgba(157,107,255,.5); text-shadow: 0 0 8px rgba(157,107,255,.5); }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; width: 100%; min-width: 0; }
.mgrid > * { min-width: 0; }
@media (min-width: 700px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mcard { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--g, var(--line)); background: #0A0F17; box-shadow: 0 0 16px -6px var(--g, transparent); cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; }
.mcard .mph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 3rem; color: #05070C; }
.mcard .mph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard .mfx { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -52%); pointer-events: none; }
.mcard .mfx .mfr { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px var(--g, transparent)); }
.mcard .mfx .mface { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); width: calc(100% * var(--hole, .55)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 2.2rem; color: #05070C; }
.mcard .mfx .mface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard .mfoot { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .55rem .5rem; background: linear-gradient(transparent, rgba(5,7,12,.92)); display: flex; align-items: center; gap: .3rem; font-size: .92rem; font-weight: 700; color: #F2FAFF; }
.mcard .mfoot .mn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.home-line { font-size: .78rem; color: var(--text-3); text-align: center; margin: 0; }

/* the tiles wait for the real numbers, so nobody sees 0 / Lv.1 for a beat */
.tiles2.waiting { visibility: hidden; }

/* The Profile page starts at the top, not centred halfway down (Martin's
   phone 2026-08-18: "the profile tab is only half the page"; the centring
   was for the log-in box alone). */
main.login-stage { justify-content: flex-start; padding-top: .6rem; }
main.login-stage .card { margin-top: 0; }

/* How points work: cards, not a table (Martin's phone 2026-08-18: "messy") */
.rules2 { display: flex; flex-direction: column; gap: .45rem; }
.rule { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; background: #0A0F17; text-align: left; }
.rule > i { flex: 0 0 auto; font-style: normal; font-size: 1.3rem; width: 2rem; text-align: center; }
.rule > i.lv { width: auto; font-size: .56rem; }
.rule > img { flex: 0 0 auto; width: 2rem; height: 2rem; }
.rule > div { flex: 1; min-width: 0; }
.rule b { display: block; font-size: .92rem; font-weight: 600; color: var(--text); }
.rule small { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; color: var(--text-3); margin-top: .1rem; }
.rule > span { flex: 0 0 auto; font-family: var(--mono); font-size: 1.05rem; font-weight: 800; color: var(--lime); text-shadow: 0 0 8px rgba(198,255,61,.5); text-align: right; }
.rule > span em { display: block; font-style: normal; font-size: .5rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); text-shadow: none; }
.rule.lvl > span { color: #FFE45C; text-shadow: 0 0 8px rgba(255,228,92,.5); }
.k2.soft { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .78rem; color: var(--text-3); text-align: center; }

/* the online dot, top right of a member card: green online, grey not */
.mcard .mdot { position: absolute; right: .5rem; top: .5rem; width: .8rem; height: .8rem; border-radius: 50%; background: #5A6B82; border: 2px solid rgba(5,7,12,.85); z-index: 3; }
.mcard .mdot.on { background: #3BFF9E; box-shadow: 0 0 8px #3BFF9E; }