/* The lens: 600 × 600, pure black (black is transparent on an additive
   display). No boxes, cards or borders around content. Cyan is the only colour
   and it means "playing now / just scored". */
:root {
  --you: #F2F2F2;
  --them: #9AA0A8;
  --grey: #7D838C;
  --dim: #5A5F68;
  --live: #5CE1E6;
  --final: #3A3F47;
  --black: #000000;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); }
body { width: 600px; height: 600px; overflow: hidden; }

.lens {
  position: relative;
  width: 600px;
  height: 600px;
  padding: 34px 34px 28px;
  background: var(--black);
  color: var(--you);
  font-family: 'Figtree', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* header */
.hdr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
.hdr .side { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hdr .them { justify-content: flex-end; }
.hdr .score { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.hdr .me .score { color: var(--you); }
.hdr .them .score { color: var(--them); }
.hdr .who { font-size: 15px; font-weight: 500; color: var(--grey); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hdr .when { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; color: var(--grey); white-space: nowrap; }
.hdr .sub { font-size: 13px; color: var(--dim); white-space: nowrap; }

.page { display: flex; flex-direction: column; margin-top: 26px; min-height: 0; }
.label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* face grid */
.grid { margin-top: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 24px; column-gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ring { width: 84px; height: 84px; border-radius: 50%; padding: 4px; }
.ring.sel, .rface.sel { box-shadow: 0 0 0 3px var(--black), 0 0 0 5px var(--you); }
.fwrap { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--black); border: 3px solid var(--black); }
.face, .cface, .pface, .fface { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--black); }
.ini { display: flex; align-items: center; justify-content: center; background: #16191E; color: var(--grey); font-weight: 700; letter-spacing: 0.02em; }
.face.ini { font-size: 22px; }
.pts { font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pts.small { font-size: 18px; line-height: 24px; }
.nm { max-width: 104px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* plays */
.plays { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 70px; column-gap: 14px; align-items: center; }
.rface { width: 46px; height: 46px; border-radius: 50%; }
.pface.ini { font-size: 14px; }
.rtxt { display: flex; flex-direction: column; min-width: 0; }
.rname { font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdesc { font-size: 15px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpts { text-align: right; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.empty { margin-top: 40px; text-align: center; font-size: 18px; color: var(--grey); }

/* player card */
.card { flex-grow: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cring { margin-top: 6px; width: 176px; height: 176px; border-radius: 50%; padding: 6px; }
.cring .fwrap { border-width: 5px; }
.cface.ini { font-size: 44px; }
.cname { margin-top: 14px; font-size: 30px; font-weight: 700; line-height: 1.1; }
.cmeta { margin-top: 4px; font-size: 16px; color: var(--grey); }
.cpts { margin-top: 10px; display: flex; align-items: baseline; gap: 12px; }
.cpts .big { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cproj { font-size: 16px; color: var(--grey); }
.cline { margin-top: 8px; font-size: 18px; color: var(--you); }
.cevs { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; width: 400px; }
.cev { display: grid; grid-template-columns: 80px minmax(0, 1fr) 60px; column-gap: 10px; font-size: 16px; }
.cev .t { text-align: left; color: var(--dim); }
.cev .d { text-align: left; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cev .p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* leagues */
.leagues { margin-top: 16px; display: flex; flex-direction: column; gap: 18px; }
.lg { font-size: 26px; font-weight: 700; display: flex; align-items: baseline; gap: 12px; padding-left: 14px; border-left: 3px solid transparent; }
.lg.sel { border-left-color: var(--you); }
.lg .cur { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; color: var(--dim); text-transform: uppercase; }

/* footer: the latest play */
.foot { margin-top: auto; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.fface { width: 30px; height: 30px; }
.fface.ini { font-size: 11px; }
.ftext { grid-column: 2; font-size: 16px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpts { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* messages: never a blank lens */
.msg { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 30px; }
.mtitle { font-size: 26px; font-weight: 700; color: var(--you); }
.mdetail { font-size: 18px; color: var(--grey); line-height: 1.35; }

/* score flash: MY player scored. The whole lens becomes his tile, scaled up —
   the same shape as a grid tile (ring, black gap, face, points under, last
   name under that). The page stays in the DOM underneath (so its faces are
   not re-created) but hidden, so nothing else shows — through the fade-out
   too: on an additive display a page showing through a fading flash is two
   layers of light, not a cross-fade. When the flash is gone, the page is back
   exactly as it was. */
.flash-slot:empty { display: none; }
/* .flashing is toggled by app.js (render.lensClasses), not derived with
   :has(.flash) — the glasses' web view may not support :has(). */
.lens.flashing > :not(.flash-slot) { visibility: hidden; }
.flash {
  position: absolute; inset: 0; background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 40px; text-align: center;
  animation: flash-in 150ms ease-out;
}
.flash.out { animation: flash-out 300ms ease-in forwards; }
.xlabel { margin-bottom: 14px; font-size: 15px; font-weight: 800; letter-spacing: 0.2em; color: var(--live); }
.xring { width: 260px; height: 260px; border-radius: 50%; padding: 12px; background: var(--live); flex-shrink: 0; }
.xwrap { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--black); border: 10px solid var(--black); }
.xface { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--black); }
.xface.ini { font-size: 64px; }
.xface.xsum { display: flex; align-items: center; justify-content: center; color: var(--you); font-size: 96px; font-weight: 800; background: var(--black); }
.xpts { margin-top: 14px; font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--live); }
.xname { margin-top: 8px; font-size: 24px; font-weight: 600; color: var(--you); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xdesc { margin-top: 6px; font-size: 18px; color: var(--grey); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes flash-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes flash-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .flash, .flash.out { animation: none; }
  .flash.out { opacity: 0; }
}

/* pager dots */
.dots { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.dot { width: 5px; height: 5px; border-radius: 3px; background: var(--final); }
.dot.on { height: 18px; background: var(--you); }