/* © 2026 Roy Borkin. All rights reserved. See LICENSE. */
/* ==========================================================================
   Home → PlayStation / Steam — the round "console" screen (js/screens/consoles.js).
   Blurred game art behind everything, a presence ring + progress arc on the rim, four pages
   (Now · Recent · Trophies/Achievements · Friends) switched by swipe, knob or the dots at the bottom.
   ========================================================================== */
.cs { --sc: rgb(var(--ink) / .2); background: radial-gradient(circle at 50% 40%, var(--bg2) 0%, var(--bg) 70%); overflow: clip; }
#app:not([data-theme="classic"]) .cs { background: transparent; }
#app[data-theme="soft"] .cs { background: var(--bg); }
/* presence colours: PlayStation = its blue in a game, green online; Steam = like its client (green in game, blue online) */
.cs { --s-ingame: var(--c); --s-online: var(--ok); }
.cs[data-svc="steam"] { --s-ingame: #8fc93a; --s-online: #57cbde; }
.cs[data-status="ingame"] { --sc: var(--s-ingame); }
.cs[data-status="online"] { --sc: var(--s-online); }
.cs[data-status="away"] { --sc: var(--warn); }
.cs[data-status="busy"] { --sc: var(--danger); }

/* background: the game's art, blurred, under a scrim in the theme's own background colour */
.cs-bg { position: absolute; inset: -10%; background: center / cover no-repeat; filter: blur(4.5cqmin) saturate(1.35); opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease), transform 1.4s var(--ease); pointer-events: none; }
.cs-bg.in { opacity: .8; transform: scale(1); }
.cs:not(.playing) .cs-bg.in { opacity: .42; }
#app[data-mode="light"] .cs-bg.in { opacity: .5; }
.cs-scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 58%, color-mix(in srgb, var(--bg) 94%, transparent) 100%); }

/* rim: presence ring + progress arc */
.cs-rim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cs-rim svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cs-rim circle { fill: none; }
.cs-status { stroke: var(--sc); stroke-width: .6; filter: drop-shadow(0 0 .6px var(--sc)); transition: stroke .6s; }
.cs[data-status="ingame"] .cs-status { stroke-width: .8; animation: cs-breathe 3.4s ease-in-out infinite; }
@keyframes cs-breathe { 50% { opacity: .45; } }
.cs-track { stroke: rgb(var(--ink) / .1); stroke-width: 1.5; }
.cs-arc { stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dasharray 1.2s var(--ease); filter: drop-shadow(0 0 .8px color-mix(in srgb, var(--c) 70%, transparent)); }
.cs-knob { display: none; }
.cs:not(.has-arc) :is(.cs-track, .cs-arc), .cs:not(.has-arc) .cs-arclabel { opacity: 0; }
.cs-arclabel { position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: .35cqmin 1.1cqmin; border-radius: 99px; font-size: 1.85cqmin; font-weight: 800; letter-spacing: .02em;
  background: var(--c); color: #fff; box-shadow: 0 .4cqmin 1.6cqmin rgb(var(--shade) / .45); pointer-events: none; transition: left 1.2s var(--ease), top 1.2s var(--ease), opacity .3s; white-space: nowrap; }
.cs-arclabel:empty { opacity: 0; }

/* pages */
.cs-pages { position: absolute; inset: 0; z-index: 2; }
.cs-page { position: absolute; inset: 0; transition: transform .45s var(--ease), opacity .32s ease; }
.cs-page.left { transform: translateX(-28%); opacity: 0; pointer-events: none; }
.cs-page.right { transform: translateX(28%); opacity: 0; pointer-events: none; }
.cs > .on-circle { z-index: 4; }

/* -------- Now */
.cs-now { display: flex; flex-direction: column; align-items: center; padding-top: 23.5%; }
.cs-me { position: absolute; left: 50%; top: 12.6%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 1.3cqmin; max-width: 48%;
  padding: .7cqmin 2.6cqmin .7cqmin .7cqmin; border-radius: 99px; background: rgb(var(--paper) / .32); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cs-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cs-me-text b { font-size: 2.45cqmin; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-me-text span { font-size: 1.9cqmin; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .7cqmin; }
.cs-ava { flex: none; border-radius: 50%; background: var(--ph) center / cover; display: grid; place-items: center; font-weight: 800; color: var(--c); }
.cs-ava.sm { width: 5.4cqmin; height: 5.4cqmin; font-size: 2.4cqmin; }
.cs-ava.md { width: 8cqmin; height: 8cqmin; font-size: 3.4cqmin; }
.cs-ava.xl { width: 29cqmin; height: 29cqmin; font-size: 11cqmin; box-shadow: 0 2cqmin 6cqmin rgb(var(--shade) / .45); }
.cs-sdot { flex: none; display: inline-block; width: 1.5cqmin; height: 1.5cqmin; border-radius: 50%; background: var(--dim); }
.cs-sdot[data-s="ingame"] { background: var(--s-ingame); box-shadow: 0 0 1cqmin var(--s-ingame); }
.cs-sdot[data-s="online"] { background: var(--s-online); }
.cs-sdot[data-s="away"] { background: var(--warn); }
.cs-sdot[data-s="busy"] { background: var(--danger); }

.cs-hero { position: relative; flex: none; }
.cs-hero.idle { margin-top: 2cqmin; }
.cs-sring { position: absolute; inset: -1.5cqmin; border-radius: 50%; border: .55cqmin solid var(--dim); pointer-events: none; }
.cs-sring[data-s="online"] { border-color: var(--s-online); box-shadow: 0 0 3cqmin color-mix(in srgb, var(--s-online) 35%, transparent); }
.cs-sring[data-s="away"] { border-color: var(--warn); }
.cs-art { position: relative; flex: none; background: var(--ph) center / cover no-repeat; overflow: hidden; display: grid; place-items: center; }
.cs-art-ph { font-family: var(--display); font-weight: 800; color: color-mix(in srgb, var(--c) 70%, rgb(var(--ink))); opacity: .7; font-size: 2.4cqmin; }
.cs-art.loaded .cs-art-ph { display: none; }
.cs-art.big { box-shadow: 0 2.4cqmin 7cqmin rgb(var(--shade) / .55), 0 0 0 1px rgb(var(--ink) / .12); }
.cs-art.big .cs-art-ph { font-size: 9cqmin; }
.cs-art.big.square { width: 33cqmin; height: 33cqmin; border-radius: 15%; }
.cs-art.big.wide { width: 58cqmin; height: 27.1cqmin; border-radius: 2.6cqmin; margin-top: 3cqmin; }
.cs-game { margin-top: 2.6cqmin; max-width: 66%; font-family: var(--display); font-size: 4.6cqmin; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; text-shadow: 0 .3cqmin 2cqmin rgb(var(--paper) / .4); }
.cs-gsub { margin-top: .6cqmin; max-width: 66%; font-size: 2.35cqmin; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-strip { margin-top: 2.2cqmin; display: flex; align-items: center; gap: 1.6cqmin; font-size: 2.3cqmin; font-weight: 700; max-width: 74%; }
.cs-tcount { display: inline-flex; align-items: center; gap: .5cqmin; font-variant-numeric: tabular-nums; }
.cs-pct { padding: .4cqmin 1.3cqmin; border-radius: 99px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 55%, rgb(var(--ink))); font-weight: 800; }
.cs-last { font-size: 1.7cqmin; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cs-tt { display: inline-grid; place-items: center; font-size: 2.6cqmin; color: var(--muted); flex: none; }
.cs-tt[data-t="platinum"] { color: #a9c6f0; } .cs-tt[data-t="gold"] { color: #f2c14e; } .cs-tt[data-t="silver"] { color: #c9ced6; } .cs-tt[data-t="bronze"] { color: #d58a56; }
#app[data-mode="light"] .cs-tt[data-t="platinum"] { color: #4f74b3; } #app[data-mode="light"] .cs-tt[data-t="gold"] { color: #b88400; }
#app[data-mode="light"] .cs-tt[data-t="silver"] { color: #7c8591; } #app[data-mode="light"] .cs-tt[data-t="bronze"] { color: #a2582a; }
.cs-actions { margin-top: 2.4cqmin; display: flex; align-items: center; justify-content: center; gap: 1.6cqmin; max-width: 76%; min-height: 6cqmin; }
.cs-actions .pill.small { margin: 0; display: inline-flex; align-items: center; gap: .9cqmin; max-width: 34cqmin; }
.cs-actions .pill.small span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-actions .pill .ic { font-size: 2.9cqmin; flex: none; }
.cs .pill.primary { --c: inherit; }
.cs-power.busy { animation: orb-busy .5s ease-in-out infinite alternate; }
.cs-pstate { font-size: 2cqmin; color: var(--muted); display: inline-flex; align-items: center; gap: .7cqmin; }
.cs-pstate::before { content: ''; width: 1.3cqmin; height: 1.3cqmin; border-radius: 50%; background: var(--dim); }
.cs-pstate[data-s="awake"]::before { background: var(--ok); box-shadow: 0 0 1cqmin var(--ok); }
.cs-pstate[data-s="standby"]::before { background: var(--warn); }
.cs-pstate:empty { display: none; }
.cs-stale { position: absolute; left: 50%; top: 19%; transform: translateX(-50%); max-width: 40%; font-size: 1.85cqmin; color: var(--warn); text-align: center; line-height: 1.3; }

/* -------- list pages */
.cs-head { position: absolute; left: 50%; top: 13.5%; transform: translate(-50%, -50%); text-align: center; width: 48%; }
.cs-title { font-family: var(--display); font-size: 3.7cqmin; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sub { font-size: 2.1cqmin; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .3cqmin; }
.cs-list { position: absolute; left: 13.5%; right: 13.5%; top: 25%; bottom: 13.5%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
  padding: 1.6cqmin 0 7cqmin;
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 86%, transparent); }
.cs-list::-webkit-scrollbar { display: none; }
.cs-row { width: 100%; display: flex; align-items: center; gap: 2.1cqmin; padding: 1.2cqmin 1.8cqmin; margin-bottom: 1cqmin; border-radius: 3cqmin; text-align: left;
  background: rgb(var(--ink) / .055); border: 1px solid rgb(var(--ink) / .06); transform-origin: 50% 50%; }
button.cs-row:active { background: var(--glass-2); }
.cs-row.playing { background: color-mix(in srgb, var(--c) 15%, transparent); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.cs-row-text { flex: 1; min-width: 0; }
.cs-row-title { font-size: 2.75cqmin; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-row-sub { font-size: 2.05cqmin; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .25cqmin; }
.cs-row.playing .cs-row-sub { color: color-mix(in srgb, var(--c) 60%, rgb(var(--ink))); }
.cs-art.thumb.square { width: 8.6cqmin; height: 8.6cqmin; border-radius: 1.8cqmin; }
.cs-art.thumb.wide { width: 15cqmin; height: 7cqmin; border-radius: 1.2cqmin; }
.cs-art.mini.square { width: 6cqmin; height: 6cqmin; border-radius: 1.3cqmin; }
.cs-art.mini.wide { width: 10.6cqmin; height: 5cqmin; border-radius: .9cqmin; }
.cs-art.mini .cs-art-ph, .cs-art.thumb .cs-art-ph { font-size: 2cqmin; }
.cs-row.award .cs-art.thumb { width: 7cqmin; height: 7cqmin; border-radius: 1.4cqmin; }
.cs-row.locked .cs-art { filter: grayscale(1); opacity: .55; }
.cs-row.locked .cs-row-title { color: var(--muted); }
.cs-row .cs-tt { font-size: 3.2cqmin; }
.ibtn.cs-go { flex: none; width: 7cqmin; height: 7cqmin; font-size: 3.2cqmin; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 60%, rgb(var(--ink))); border-color: transparent; }
.cs-fava { position: relative; flex: none; }
.cs-fava .cs-sdot { position: absolute; right: -.1cqmin; bottom: -.1cqmin; width: 2.4cqmin; height: 2.4cqmin; border: .45cqmin solid var(--bg); }
.cs-sec { font-size: 1.9cqmin; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); text-align: center; margin: 2.6cqmin 0 1.3cqmin; }

/* trophy level / achievement ring */
.cs-level { display: grid; place-items: center; margin: 0 0 1.6cqmin; }
.cs-lvl-ring { position: relative; width: 21cqmin; height: 21cqmin; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); }
.cs-level { --p: 0; }
.cs-lvl-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgb(var(--ink) / .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5cqmin), #000 calc(100% - 1.4cqmin)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5cqmin), #000 calc(100% - 1.4cqmin)); }
.cs-lvl-num { font-family: var(--display); font-size: 6cqmin; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.cs-lvl-cap { margin-top: .8cqmin; font-size: 1.8cqmin; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cs-counts { display: flex; justify-content: center; gap: 3.4cqmin; margin-bottom: 1.4cqmin; }
.cs-count { display: flex; flex-direction: column; align-items: center; gap: .3cqmin; }
.cs-count .cs-tt { font-size: 4cqmin; }
.cs-count b { font-size: 2.9cqmin; font-variant-numeric: tabular-nums; }
.cs-count span { font-size: 1.7cqmin; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.cs-lvlbadge { display: grid; place-items: center; width: 6.4cqmin; height: 6.4cqmin; border-radius: 50%; border: .55cqmin solid var(--c); font-style: normal; font-weight: 800; font-size: 2.6cqmin; }
.cs-gprog { display: flex; align-items: center; gap: 1.6cqmin; padding: 0 3%; font-size: 2.2cqmin; margin: 1cqmin 0 .4cqmin; }
.cs-gprog span { max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.cs-bar { --p: 0%; flex: 1; height: 1.1cqmin; border-radius: 99px; background: rgb(var(--ink) / .1); overflow: hidden; }
.cs-bar::after { content: ''; display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--c); }

/* notes and full-screen states */
.cs-note { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 60%; display: flex; flex-direction: column; align-items: center; gap: 2cqmin;
  text-align: center; font-size: 2.6cqmin; color: var(--muted); line-height: 1.45; }
.cs-list .cs-note { position: static; transform: none; width: 100%; margin-top: 4cqmin; }
.cs-note .pill.small { margin: 0; }
.cs-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.7cqmin; padding: 0 17%; text-align: center; }
.cs-state-ic { width: 12cqmin; height: 12cqmin; border-radius: 50%; display: grid; place-items: center; font-size: 5.4cqmin; color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.cs-state-title { font-family: var(--display); font-size: 4.3cqmin; font-weight: 800; letter-spacing: -.01em; }
.cs-state-msg { font-size: 2.45cqmin; color: var(--muted); line-height: 1.5; max-width: 100%; }
.cs-state-btns { display: flex; gap: 1.6cqmin; margin-top: 1cqmin; }
.cs-state-btns .pill.small { margin: 0; }

/* page dots */
.cs-nav { position: absolute; z-index: 4; left: 50%; top: 90.4%; transform: translate(-50%, -50%); display: flex; gap: .6cqmin; padding: .6cqmin; border-radius: 99px;
  background: rgb(var(--paper) / .35); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cs-dot { width: 6.6cqmin; height: 6.6cqmin; border-radius: 50%; display: grid; place-items: center; font-size: 3.1cqmin; color: var(--muted); transition: background .25s, color .25s, transform .2s var(--spring); }
.cs-dot:active { transform: scale(.88); }
.cs-dot.on { background: var(--fg); color: var(--on-fg); }

/* -------- themes */
#app.lite .cs-bg { filter: blur(3cqmin); }
#app.lite .cs-status { animation: none; }
#app.lite :is(.cs-me, .cs-nav) { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 85%, transparent); }
/* Console 5: crisp cards, white focus ring on the game */
#app[data-theme="ps5"] .cs-art.big { box-shadow: 0 0 0 .55cqmin rgb(var(--ink)), 0 0 4cqmin color-mix(in srgb, var(--c2) 45%, transparent), 0 2.4cqmin 6cqmin rgb(var(--shade) / .5); }
#app[data-theme="ps5"] .cs-art.big.square { border-radius: 9%; }
#app[data-theme="ps5"] .cs-row { border-radius: 2cqmin; }
#app[data-theme="ps5"] :is(.cs-game, .cs-title, .cs-lvl-num) { font-weight: 600; }
#app[data-theme="ps5"] .cs-dot.on { background: rgb(var(--ink) / .16); color: rgb(var(--ink)); box-shadow: 0 0 0 .4cqmin rgb(var(--ink)); }
/* XMB: light type, glowing white lines */
#app[data-theme="xmb"] :is(.cs-game, .cs-title, .cs-lvl-num, .cs-state-title) { font-weight: 300; text-shadow: 0 0 2cqmin rgb(var(--ink) / .45); }
#app[data-theme="xmb"] .cs-row-title { font-weight: 400; }
#app[data-theme="xmb"] .cs-arc { stroke: rgb(var(--ink)); filter: drop-shadow(0 0 1px rgb(var(--ink))); }
#app[data-theme="xmb"] .cs-arclabel { background: rgb(var(--ink)); color: var(--c1); }
#app[data-theme="xmb"] .cs-row { background: rgb(var(--ink) / .07); border-color: rgb(var(--ink) / .18); }
#app[data-theme="xmb"] .cs-dot.on { background: rgb(var(--ink) / .2); color: rgb(var(--ink)); box-shadow: 0 0 2cqmin rgb(var(--ink) / .4); }
#app[data-theme="xmb"] .cs-nav, #app[data-theme="xmb"] .cs-me { background: rgb(var(--ink) / .08); }
/* Music Red / Music Green: big bold titles */
#app:is([data-theme="amusic"], [data-theme="spot"]) .cs-game { font-weight: 900; letter-spacing: -.03em; }
#app[data-theme="amusic"] .cs-art.big.square { border-radius: 9%; }
/* Bauhaus: flat, square, no glow */
#app[data-theme="bauhaus"] :is(.cs-row, .cs-art, .cs-me, .cs-nav) { border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#app[data-theme="bauhaus"] .cs-art.big { box-shadow: 1.2cqmin 1.2cqmin 0 rgb(var(--ink)); }
/* Soft UI: moulded surfaces */
#app[data-theme="soft"] .cs-row { background: var(--surface); border: 0; box-shadow: .6cqmin .6cqmin 1.4cqmin var(--neu-lo), -.6cqmin -.6cqmin 1.4cqmin var(--neu-hi); }
#app[data-theme="soft"] :is(.cs-me, .cs-nav) { background: var(--surface); border: 0; box-shadow: .6cqmin .6cqmin 1.4cqmin var(--neu-lo), -.6cqmin -.6cqmin 1.4cqmin var(--neu-hi); backdrop-filter: none; }