/**
* TRPlayerSummarySection Styles
*
* The Player Summary screen, reached from Phone Verification's own
* CONFIRMED state CONTINUA. Reuses the shared .tr-question-section/
* .tr-question-content/.tr-question-bottom-action shell (tr-question.
* css), the shared intro typography, TRButton's own .tr-button--outline
* variant for INDIETRO, and TROptionButton's own filled .tr-primary-
* action for CONFERMA E CONTINUA.
*
* CARD geometry is NOT a new box style: --tr-player-summary-card-*
* below alias the exact same shared primitives every other boxed
* element in this app (Club Confirmation's card, Phone Verification's
* own cards) already uses -- 1px solid white border, --tr-radius-lg,
* --tr-club-search-background.
*
* TYPOGRAPHY is almost entirely reused, not invented: the player name,
* role and every row value read --tr-identity-field-value-* directly
* (the exact tokens the identity-confirmation card's own name/fields
* already use); every row label (and the role text) reads
* --tr-identity-field-label-* directly (same source). "Modifica" reads
* --tr-registration-login-* directly -- the exact same lime-underlined
* treatment "Accedi" already uses. SEPARATORS reuse the same
* solid-white + --tr-club-result-separator-opacity treatment every
* other separator in this app already uses.
*
* The card's own grid is a TRUE TWO COLUMNS (avatar | content) -- there
* is no third/right column and no confirmation check anywhere on this
* screen; the content column owns the full remaining card width.
*
* The AVATAR (circle + initials) and its small camera badge are the
* only genuinely new visual elements -- no existing avatar/photo
* component exists anywhere in this app to reuse. The avatar's own
* border still aliases the same plain white 1px border every circular
* status indicator in this app uses (Authorizations' own status
* circle); the camera badge is the real, unmodified camera-icon.svg
* asset shown as a plain ![]()
(NOT a CSS mask -- this asset is already
* a complete two-tone badge of its own, dark circle + white glyph, both
* fully opaque, so masking it would just render a single solid dot; see
* tr-player-summary-section.js's own note).
*
* Visual calibration (fine spacing/sizing) is intentionally NOT tuned
* yet -- structure over pixels, per this task's own instruction.
*/
:root {
/* Card geometry -- aliases the same shared primitives every other
boxed element already uses. */
--tr-player-summary-card-radius: var(--tr-radius-lg);
--tr-player-summary-card-padding-x: var(--tr-club-results-content-inset-x);
--tr-player-summary-card-padding-y: var(--tr-space-lg);
/* Vertical rhythm around each row/separator inside the card -- ONE
shared value (not a dozen per-relationship tokens, per this
task's own "do not create dozens of tokens" instruction). */
--tr-player-summary-row-gap: 8px;
/* Avatar -- the one genuinely new size control (see this file's own
header note on why the avatar itself is new UI). */
--tr-player-summary-avatar-size: 102px;
--tr-player-summary-avatar-to-content-gap: 12px;
--tr-player-summary-avatar-camera-size: 32px;
/* Camera badge's own position relative to the avatar circle --
previously hardcoded right/bottom, now independent X/Y controls.
Snapshot of the current values, so nothing moves yet. */
--tr-player-summary-avatar-camera-offset-x: -2px;
--tr-player-summary-avatar-camera-offset-y: 4px;
/* Initials' own position inside the circle -- independent X/Y nudge
on top of the avatar's existing flex-centering, same "-offset-x/
-y" pattern as the camera badge's own tokens above. 0px/0px --
no current visual change. */
--tr-player-summary-avatar-initials-offset-x: 0px;
--tr-player-summary-avatar-initials-offset-y: 5px;
/* Avatar's own border thickness -- snapshot of the current 1px
solid white border (see .tr-player-summary-avatar below), now
manually adjustable. No current visual change. */
--tr-player-summary-avatar-border-width: 1.5px;
/* No-photo avatar's own dark overlay, painted between the
id-empty1.png background and the initials (see .tr-player-
summary-avatar::before below). Opacity initialized for a subtle
darkening, manually adjustable. */
--tr-player-summary-avatar-overlay-color: #000;
--tr-player-summary-avatar-overlay-opacity: 0.5;
/* Identity row (avatar + name/role + Modifica): a min-height (not a
forced height, so it never clips) -- snapshot of its current
rendered height, which today is set entirely by the avatar's own
size (56px); and the name -> role internal gap, currently 0px
(no gap; the two simply stack). */
--tr-player-summary-identity-row-min-height: 56px;
--tr-player-summary-name-to-role-gap: 0px;
/* Each data row (DATA DI NASCITA / CIRCOLO / NUMERO DI TELEFONO): a
min-height (not forced -- the CIRCOLO row already wraps to two
lines today and must keep growing beyond this), snapshot of the
current single-line row height (measured directly: DATA DI
NASCITA/NUMERO DI TELEFONO are both 37px today; CIRCOLO's own
112px already exceeds this and is unaffected by a min-height).
Row label -> value gap, currently 0px (no gap; the two simply
stack), same as the identity row's own name -> role gap above but
kept as its own independent token since these are two different
relationships. */
--tr-player-summary-row-min-height: 48px;
--tr-player-summary-label-to-value-gap: 8px;
/* Modifica's own optical position nudge -- a transform on top of
its already-correct real flex position (same "-offset-x/-y"
pattern --tr-club-search-icon-offset-x/-y and others already use
throughout this app), never a replacement for that layout. 0px/
0px -- no current visual change. */
--tr-player-summary-modify-offset-x: 0px;
--tr-player-summary-modify-offset-y: 10px;
/* Summary card -> CONFERMA E CONTINUA, the same established 12px
"belongs directly to the card/content group" local-override
pattern Club Confirmation's own CONFERMA and Phone Number's own
CONTINUA already use. */
--tr-player-summary-card-to-continue-gap: 12px;
}
/* min-height: 0 (responsive pass) lets this group shrink below its
natural content height when the screen is short, passing that
constraint down to .tr-player-summary-card below (same pass-through
pattern .tr-question-section/.tr-question-content already use) --
has no effect when there's already enough room, so the reference-
viewport design is unchanged. */
.tr-player-summary-group {
display: flex;
flex-direction: column;
width: 100%;
min-height: 0;
}
.tr-player-summary-card {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
padding: var(--tr-player-summary-card-padding-y) var(--tr-player-summary-card-padding-x);
border: 1px solid #ffffff;
border-radius: var(--tr-player-summary-card-radius);
background: var(--tr-club-search-background);
}
/* Responsive pass: the card's own outer box can now shrink below its
natural height on a short screen (flex: 1 1 auto + min-height: 0)
and scroll its own content internally (overflow-y: auto) rather than
pushing CONFERMA E CONTINUA/INDIETRO off-screen or scrolling the
whole page. The card's own internal grid/padding/avatar/typography
(below) are completely untouched -- nothing shrinks or redesigns,
only the box's height adapts and, when it must, clips+scrolls.
Scoped to .tr-player-summary-group specifically (not the bare
.tr-player-summary-card class) so this never reaches Profile
Created's own reuse of this same card class (tr-profile-created.css),
which lives inside .tr-profile-created-group instead -- that screen
is completely unaffected. */
.tr-player-summary-group .tr-player-summary-card {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tr-player-summary-group .tr-player-summary-card::-webkit-scrollbar {
display: none;
}
/* Overrides the shared .tr-option-button.tr-primary-action rule's own
margin-top (28px, --tr-primary-action-gap-above) for this CONTINUA
only -- same local-override pattern as .tr-club-confirmation-confirm/
.tr-phone-continue elsewhere in this app. flex-shrink: 0 (responsive
pass) keeps it fixed/never compressed by the flex-shrink cascade that
now lets the card above it shrink+scroll on a short screen. */
.tr-option-button.tr-primary-action.tr-player-summary-continue {
margin-top: var(--tr-player-summary-card-to-continue-gap);
flex-shrink: 0;
}
/* ─── Shared grid (identity row + every data row) ───
ONE grid for the whole card so the avatar column and the content
column (name/role + every label/value) share the exact same X
positions across all four rows -- every cell below is placed purely
by its own grid-area (see each cell's own rule), never by DOM
order/nesting. TRUE TWO COLUMNS ONLY (avatar | content) -- there is
no third/right column; the content column expands all the way to
the card's own right edge, so long names/DOB values/club names/
phone numbers all get the full available width. Row heights reuse
the exact same min-height tokens the old per-row flex containers
used (via minmax(), so the avatar/multi-line CIRCOLO value can still
grow past their own floor); the separator rows are auto-height
(their own fixed 1px + margin already sets their height). */
.tr-player-summary-grid {
display: grid;
align-items: center;
column-gap: var(--tr-player-summary-avatar-to-content-gap);
grid-template-columns: var(--tr-player-summary-avatar-size) 1fr;
grid-template-rows:
minmax(var(--tr-player-summary-identity-row-min-height), auto)
auto
minmax(var(--tr-player-summary-row-min-height), auto)
auto
minmax(var(--tr-player-summary-row-min-height), auto)
auto
minmax(var(--tr-player-summary-row-min-height), auto);
grid-template-areas:
"avatar name"
". sep-top"
"dob-action dob-content"
"sep-1 sep-1"
"club-action club-content"
"sep-2 sep-2"
"phone-action phone-content";
}
.tr-player-summary-avatar-wrap {
grid-area: avatar;
position: relative;
}
/* No existing avatar component in this app -- a plain circle (same
1px solid white border every other circular status indicator in
this app uses, e.g. Authorizations' own status circle). Its own
size/border/radius are unchanged; the ONLY addition is a background-
image (set inline per-render in tr-player-summary-section.js -- the
player's real photo when one exists, otherwise the existing
id-empty1.png placeholder), cover/centered and clipped to the circle
via overflow: hidden (border-radius alone already clips a background-
image in every browser this app targets, overflow: hidden is just a
defensive belt-and-suspenders here). */
.tr-player-summary-avatar {
position: relative;
width: var(--tr-player-summary-avatar-size);
height: var(--tr-player-summary-avatar-size);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: var(--tr-player-summary-avatar-border-width) solid #ffffff;
border-radius: 50%;
background-color: transparent;
background-size: cover;
background-position: center;
}
/* No-photo avatar's own dark overlay -- painted between the
id-empty1.png background and the initials. Only present when
initials actually exist (the no-photo case; see tr-player-summary-
section.js's own photoUrl branch), so a real photo is never
darkened. Absolutely positioned/inset over the circle, clipped to it
by the avatar's own overflow: hidden + border-radius, so it can
never reach the camera badge (a sibling of the avatar, outside this
box entirely). z-index sits below the initials' own (see
.tr-player-summary-avatar-initials below) so paint order is exactly
background -> overlay -> initials. */
.tr-player-summary-avatar:has(.tr-player-summary-avatar-initials)::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background-color: var(--tr-player-summary-avatar-overlay-color);
opacity: var(--tr-player-summary-avatar-overlay-opacity);
}
/* Initials -- shown ONLY when no real photo exists (see
buildIdentityRow()'s own note), centered over the id-empty1.png
placeholder. Reuses the existing Garamond Book Condensed token
already loaded in this app (--tr-font-garamond-book-condensed, tr-
hero-section.css/tr-question.css already read it directly) -- not a
new/duplicated font load. Size/color are UNCHANGED from before (only
the font-family itself moved from Franklin to Garamond, per this
task's own "do not change size/color unless necessary" note). */
.tr-player-summary-avatar-initials {
position: relative;
z-index: 2;
font-family: var(--tr-font-garamond-book);
font-size: calc(var(--tr-player-summary-avatar-size) * 0.45);
color: var(--tr-color-text-dim);
transform: translate(var(--tr-player-summary-avatar-initials-offset-x), var(--tr-player-summary-avatar-initials-offset-y));
}
/* Small change-photo badge -- the real, unmodified camera-icon.svg
asset, displayed as a plain ![]()
(see tr-player-summary-section.js's
own note for why this asset is never a CSS mask: it is already a
complete two-tone badge -- a dark filled circle with a white camera
glyph on top, both fully opaque -- and this shows it exactly as
authored). A corner badge overlapping a circular avatar has no real-
layout equivalent, so absolute positioning is used here specifically
(not for primary content flow).
z-index IS needed: the initials (z-index: 2) and the no-photo
overlay (z-index: 1) are both explicit positive z-indices, which per
CSS stacking rules paint ABOVE this badge's own previous implicit
z-index: auto -- the overlay/avatar image were bleeding through the
badge in the corner where it overlaps the circle. z-index: 3 fixes
that. The own background-color: #000 (matching the SVG's own
already-opaque dark circle) is a belt-and-suspenders guard against
any edge-antialiasing letting the layers below show through. */
.tr-player-summary-avatar-camera {
position: absolute;
z-index: 3;
right: var(--tr-player-summary-avatar-camera-offset-x);
bottom: var(--tr-player-summary-avatar-camera-offset-y);
width: var(--tr-player-summary-avatar-camera-size);
height: var(--tr-player-summary-avatar-camera-size);
display: block;
background-color: #000;
border-radius: 50%;
}
.tr-player-summary-identity-content {
grid-area: name;
min-width: 0;
display: flex;
flex-direction: column;
}
/* Reads --tr-identity-field-value-* directly -- the exact tokens the
identity-confirmation card's own name already uses. Font-size is the
same idiom(B) clamp-ramp used throughout the registration-responsive
pass -- 320px floor ramping back up to the original flat 24px by
~374px, so the reference viewport is unchanged. */
.tr-player-summary-name {
margin: 0;
text-align: left;
font-family: var(--tr-font-garamond-bold-condensed);
font-size: calc(20.5px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.065008);
letter-spacing: var(--tr-identity-field-value-letter-spacing);
color: var(--tr-color-text-dim);
}
/* Reads --tr-identity-field-label-* directly (same source as every row
label below), not a new type style. Font-size uses the same
idiom(B) ramp as the name above, floor to the original flat 14px. */
.tr-player-summary-role {
margin: var(--tr-player-summary-name-to-role-gap) 0 0;
text-align: left;
font-family: var(--tr-font-franklin-book);
font-size: calc(12px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.037149);
letter-spacing: 0.2px;
color: #fff;
}
/* "Modifica" -- reads --tr-registration-login-* directly, the exact
same lime-underlined treatment "Accedi" already uses. */
.tr-player-summary-modify {
padding: 0;
border: none;
background: none;
font-family: var(--tr-registration-login-font-family);
/* Registration-responsive-pass: no shared token exists for this
size (the "Accedi" link it otherwise mirrors reads font-size:
inherit, not its own token) -- same idiom(B) clamp-ramp used
throughout this pass, 320px floor ramping back up to the
original flat 12px by ~374px. */
font-size: calc(10.5px + clamp(0px, calc(100vw - 320px), 53.832px) * 0.027863);
color: var(--tr-registration-login-color);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
transform: translate(var(--tr-player-summary-modify-offset-x), var(--tr-player-summary-modify-offset-y));
}
/* Each data row's own "Modifica" -- left column now (not the right),
centered horizontally underneath the avatar (same column, same
width). The three targets share this same centering rule; each own
--dob/--club/--phone modifier below only places it in its own row. */
.tr-player-summary-row-action {
justify-self: center;
}
.tr-player-summary-row-action--dob {
grid-area: dob-action;
}
.tr-player-summary-row-action--club {
grid-area: club-action;
}
.tr-player-summary-row-action--phone {
grid-area: phone-action;
}
.tr-player-summary-separator {
width: 100%;
height: 1px;
margin: var(--tr-player-summary-row-gap) 0;
background: #ffffff;
opacity: var(--tr-club-result-separator-opacity);
}
/* Identity -> DOB separator: starts at the same X as the content
column (player name), never runs underneath the avatar. */
.tr-player-summary-separator--top {
grid-area: sep-top;
}
/* DOB -> CIRCOLO and CIRCOLO -> TELEFONO separators: full internal
card width, edge to edge. */
.tr-player-summary-separator--mid {
grid-area: sep-1;
}
.tr-player-summary-separator--bottom {
grid-area: sep-2;
}
/* ─── Data rows (DATA DI NASCITA / CIRCOLO / NUMERO DI TELEFONO) ─── */
.tr-player-summary-row-text {
min-width: 0;
display: flex;
flex-direction: column;
}
.tr-player-summary-row-text--dob {
grid-area: dob-content;
}
.tr-player-summary-row-text--club {
grid-area: club-content;
}
.tr-player-summary-row-text--phone {
grid-area: phone-content;
}
.tr-player-summary-row-label {
display: block;
text-align: left;
font-family: var(--tr-identity-field-label-font-family);
font-size: var(--tr-identity-field-label-font-size);
letter-spacing: var(--tr-identity-field-label-letter-spacing);
text-transform: uppercase;
color: #ffffff;
}
.tr-player-summary-row-value {
margin: var(--tr-player-summary-label-to-value-gap) 0 0;
text-align: left;
font-family: var(--tr-identity-field-value-font-family);
/* Registration-responsive-pass: reads the shared compact-value
token (tr-identity.css) instead of a locally hardcoded 18px --
same size as before at the reference viewport, now also
responsive, and shared with Club Confirmation's own value text
(which independently hardcoded the exact same 18px). */
font-size: var(--tr-identity-field-value-compact-font-size);
letter-spacing: var(--tr-identity-field-value-letter-spacing);
color: var(--tr-color-text-dim);
}