/* ══════════════════════════════════════════════════════════════════════ HELIOS — App / Game pages app.css Component + utility layer for the in-app pages (scenarios, scenario detail, play, editor, profile, characters, …). Built entirely on the --uni-* tokens from base.css, so every color/texture/pattern follows the chosen universe. Import order on each page: base.css → universes.css → app.css Set the theme with (or u-helios3 / u-helios2 …). ══════════════════════════════════════════════════════════════════════ */ /* ── CRT scanline overlay (shared) ───────────────────────────────────────── */ .crt { position : fixed; inset : 0; z-index : 10; pointer-events: none; background : linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.22) 50%); background-size: 100% 2px; } /* Subtle universe-tinted texture behind app pages (echoes the card patterns) */ body.app-bg { background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,.13) 3px, rgba(0,0,0,.13) 4px), radial-gradient(ellipse 80% 60% at 50% -10%, var(--uni-glow-soft), transparent 70%); background-attachment: fixed; } /* ── Page scaffold ───────────────────────────────────────────────────────── */ .page { position : relative; z-index : 0; max-width : 1100px; margin : 0 auto; padding : calc(var(--nav-height) + 1.4rem) 1.5rem 4rem; } .page-narrow { max-width: 880px; } .page-wide { max-width: 1280px; } .page-head { display : flex; align-items : flex-start; justify-content: space-between; flex-wrap : wrap; gap : var(--gap-sm); margin-bottom : var(--gap-md); } .page-title { font-family : var(--font-display); font-size : var(--fs-2xl); font-weight : 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color : var(--uni-primary); line-height : 1.1; } .page-sub { font-family: var(--font-ui); font-size : var(--fs-sm); color : var(--uni-text-dim); margin-top : .3rem; } /* ── Section heading ─────────────────────────────────────────────────────── */ .section-label { font-family : var(--font-ui); font-size : var(--fs-xs); font-weight : 600; letter-spacing: var(--ls-wider); text-transform: uppercase; color : var(--uni-text-faint); margin-bottom : var(--gap-sm); } /* ── Toolbar / filters ───────────────────────────────────────────────────── */ .toolbar { display : flex; flex-wrap : wrap; align-items: center; gap : var(--gap-xs); margin-bottom: var(--gap-md); } .toolbar-sep { width: 1px; height: 1.1rem; background: var(--uni-border); margin: 0 .3rem; } /* ── Pills (sort / tags) ─────────────────────────────────────────────────── */ .pill { display : inline-block; padding : .2rem .65rem; font-family : var(--font-ui); font-size : var(--fs-2xs); font-weight : 600; letter-spacing : var(--ls-wide); text-transform : uppercase; text-decoration: none; color : var(--uni-text-dim); border : 1px solid var(--uni-border); border-radius : 2px; cursor : pointer; transition : color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .pill:hover { color: var(--uni-text); border-color: var(--uni-primary-dk); } .pill.on { color: var(--uni-primary); border-color: var(--uni-primary); background: var(--uni-glow-soft); } /* ── Buttons (extend base .btn) ──────────────────────────────────────────── */ /* base.css already defines .btn (outline → fill on hover) using --uni-primary. */ .btn-primary { background: var(--uni-primary); color: #0a0a0a; font-weight: 700; } .btn-primary::before { background: var(--uni-primary-dk); } .btn-primary:hover { color: #fff; } .btn-ghost { border-color: var(--uni-border); color: var(--uni-text); } .btn-ghost::before { background: var(--uni-border); } .btn-ghost:hover { box-shadow: none; color: #fff; } .btn-danger { border-color: #7f1d1d; color: #f87171; } .btn-danger::before { background: #7f1d1d; } .btn-danger:hover { color: #fff; box-shadow: 0 0 16px rgba(127,29,29,.5); } .btn-block { display: flex; width: 100%; justify-content: center; } /* ── Card grid ───────────────────────────────────────────────────────────── */ .grid-cards { display : grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap : var(--gap-md); } /* ── Generic panel / card ────────────────────────────────────────────────── */ .panel { border : 1px solid var(--uni-border); background : var(--uni-bg-card); border-radius: 4px; } .panel-pad { padding: var(--gap-md); } .card { position : relative; display : flex; flex-direction: column; border : 1px solid var(--uni-border); background : var(--uni-bg-card); border-radius : 4px; overflow : hidden; transition : border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); } a.card, .card a { text-decoration: none; color: inherit; } .card:hover { border-color: var(--uni-primary-dk); transform : translateY(-3px); box-shadow : 0 10px 30px rgba(0,0,0,.5); } .card-cover { aspect-ratio : 16 / 9; background : #000; overflow : hidden; position : relative; } .card-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform var(--t-base), opacity var(--t-base); } .card:hover .card-cover img { transform: scale(1.04); opacity: 1; } .card-cover-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--uni-text-faint); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; } /* Status badge over the cover */ .cover-badge { position : absolute; top: .5rem; right: .5rem; font-family : var(--font-ui); font-size : var(--fs-2xs); font-weight : 700; letter-spacing: var(--ls-base); padding : .15rem .45rem; border-radius : 2px; background : rgba(0,0,0,.7); text-transform: uppercase; } /* Universe label over the cover (hub catalog) — colored by the card's universe */ .cover-uni { position : absolute; top: .5rem; left: .5rem; font-family : var(--font-ui); font-size : var(--fs-2xs); font-weight : 700; letter-spacing: var(--ls-base); text-transform: uppercase; padding : .15rem .5rem; border-radius : 2px; background : rgba(0,0,0,.7); color : var(--uni-primary); border : 1px solid var(--uni-primary-dk); } .badge-approved { color: var(--uni-primary); border: 1px solid var(--uni-primary-dk); } .badge-draft { color: #fde047; border: 1px solid #854d0e; } .badge-pending { color: #93c5fd; border: 1px solid #1d4ed8; } .badge-rejected { color: #fca5a5; border: 1px solid #7f1d1d; } .card-body { padding: var(--gap-sm) var(--gap-md); display: flex; flex-direction: column; gap: .5rem; flex: 1; } .card-title { font-family: var(--font-ui); font-size : var(--fs-md); font-weight: 700; color : var(--uni-text); line-height: 1.25; } .card-tagline { font-family: var(--font-mono); font-size : var(--fs-sm); color : var(--uni-text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-author { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--uni-text-dim); } .card-author b { color: var(--uni-primary); font-weight: 600; } .card-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: var(--fs-xs); color: var(--uni-text-faint); } .card-stats { display: flex; gap: 1rem; font-size: var(--fs-xs); color: var(--uni-text-dim); } .card-stats b { color: var(--uni-primary); font-weight: 700; } .card-actions { padding: 0 var(--gap-md) var(--gap-md); margin-top: auto; display: flex; gap: var(--gap-xs); } /* ── Tag chips ───────────────────────────────────────────────────────────── */ .tags { display: flex; flex-wrap: wrap; gap: .35rem; } .tag { font-family : var(--font-mono); font-size : var(--fs-2xs); letter-spacing: var(--ls-base); padding : .12rem .5rem; color : var(--uni-text-dim); border : 1px solid var(--uni-border); border-radius : 2px; text-decoration: none; transition : color var(--t-fast), border-color var(--t-fast); } .tag:hover { color: var(--uni-primary); border-color: var(--uni-primary-dk); } /* ── Stat boxes (detail page) ────────────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); } .stat-box { border : 1px solid var(--uni-border); background : var(--uni-bg-card); border-radius: 3px; padding : .7rem 1rem; text-align: center; } .stat-box .v { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--uni-primary); line-height: 1; } .stat-box .k { font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--uni-text-faint); margin-top: .35rem; } /* ── Detail page cover hero ──────────────────────────────────────────────── */ .cover-hero { position: relative; aspect-ratio: 21/9; max-height: 340px; overflow: hidden; background: #000; } .cover-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .8; } .cover-hero .overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--uni-bg) 100%); } .quote { border-left: 2px solid var(--uni-primary-dk); padding-left: 1rem; font-family: var(--font-mono); font-size : var(--fs-sm); color : var(--uni-text-dim); line-height: 1.6; } .flavour { border : 1px solid var(--uni-border); background : rgba(0,0,0,.25); padding : 1rem; font-family: var(--font-mono); font-size : var(--fs-xs); font-style: italic; color : var(--uni-text-dim); line-height: 1.6; } /* ── Location thumbnails (detail) ────────────────────────────────────────── */ .loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } @media (min-width: 640px) { .loc-grid { grid-template-columns: repeat(4, 1fr); } } .loc-thumb { position: relative; } .loc-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .8; border: 1px solid var(--uni-border); } .loc-thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); padding: .25rem .5rem; font-size: var(--fs-2xs); color: var(--uni-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Forms ───────────────────────────────────────────────────────────────── */ .field { display: block; margin-bottom: var(--gap-sm); } .field > .label, .label { display: block; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: var(--ls-base); text-transform: uppercase; color: var(--uni-text-dim); margin-bottom: .3rem; } .input, .select, .textarea { width : 100%; background : #000; border : 1px solid var(--uni-border); color : var(--uni-text); font-family: var(--font-mono); font-size : var(--fs-base); padding : .55rem .7rem; border-radius: 2px; outline : none; transition : border-color var(--t-fast); } .input:focus, .select:focus, .textarea:focus { border-color: var(--uni-primary); } .textarea { resize: vertical; min-height: 4rem; } /* ── Empty state ─────────────────────────────────────────────────────────── */ .empty { border : 1px dashed var(--uni-border); border-radius: 4px; padding : 3rem 1.5rem; text-align: center; color : var(--uni-text-dim); font-family: var(--font-mono); font-size : var(--fs-sm); } .empty a { color: var(--uni-primary); } /* ── Chat / game feed bubbles ────────────────────────────────────────────── */ .msg-row { display: flex; margin-bottom: 1rem; } .msg-row.user { justify-content: flex-end; } .msg-bubble { max-width: 80%; padding: .7rem .9rem; border: 1px solid; line-height: 1.5; border-radius: 3px; font-family: var(--font-mono); font-size: var(--fs-sm); } .msg-label { font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); margin-bottom: .35rem; opacity: .8; text-transform: uppercase; } .msg-ai { background: var(--uni-glow-soft); border-color: var(--uni-primary-dk); border-left-width: 3px; color: var(--uni-text); } .msg-ai .msg-label { color: var(--uni-primary); } .msg-user { background: rgba(255,255,255,.03); border-color: var(--uni-border); border-right-width: 3px; color: var(--uni-text); font-style: italic; } .msg-user .msg-label { color: var(--uni-text-dim); } .typing::after { content: '▌'; animation: blink .7s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── Progress bar (HP / XP) ──────────────────────────────────────────────── */ .bar { height: .5rem; border-radius: 2px; background: linear-gradient(90deg, var(--uni-primary) 0 var(--p,0%), #1a1a1a var(--p,0%) 100%); } .bar-thin { height: .25rem; } /* ── Toast ───────────────────────────────────────────────────────────────── */ .toast { position: fixed; z-index: var(--z-modal); border: 1px solid var(--uni-primary); background: rgba(0,0,0,.96); padding: .8rem 1rem; font-family: var(--font-mono); font-size: var(--fs-xs); max-width: 20rem; box-shadow: 0 8px 30px rgba(0,0,0,.6); } /* ── Modal overlay ───────────────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal { border: 1px solid var(--uni-primary-dk); background: var(--uni-bg-card); border-radius: 4px; padding: 1.6rem; max-width: 30rem; width: 100%; text-align: center; } /* ── Selectable choice card (wizard) ─────────────────────────────────────── */ .choice { border : 1px solid var(--uni-border); background : var(--uni-bg-card); border-radius: 4px; padding : .85rem 1rem; cursor : pointer; transition: border-color var(--t-fast), background var(--t-fast); } .choice:hover { border-color: var(--uni-primary-dk); } .choice.sel { border-color: var(--uni-primary); background: var(--uni-glow-soft); } .choice-title { font-family: var(--font-ui); font-weight: 700; color: var(--uni-text); } .choice-desc { font-size: var(--fs-xs); color: var(--uni-text-dim); line-height: 1.4; margin-top: .25rem; } /* ── Data table (admin) ──────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-xs); } .table th, .table td { padding: .4rem .6rem; border-bottom: 1px solid var(--uni-border); text-align: left; vertical-align: top; } .table th { background: rgba(255,255,255,.03); color: var(--uni-text-dim); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-base); } .table tr:hover { background: rgba(255,255,255,.03); } .table .truncate { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table .thumb { width: 48px; height: 32px; object-fit: cover; border: 1px solid var(--uni-border); } /* ── Inline status badge ─────────────────────────────────────────────────── */ .badge { display: inline-block; padding: .1rem .5rem; font-size: var(--fs-2xs); border-radius: 3px; color: #fff; letter-spacing: var(--ls-base); } .badge-yellow { background: #854d0e; } .badge-blue { background: #1d4ed8; } .badge-green { background: #15803d; } .badge-red { background: #7f1d1d; } /* ── Alerts ──────────────────────────────────────────────────────────────── */ .alert { padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: var(--fs-sm); } .alert-ok { background: rgba(21,128,61,.15); border: 1px solid #16a34a; color: #86efac; } .alert-err { background: rgba(127,29,29,.15); border: 1px solid #7f1d1d; color: #fca5a5; } /* ══════════════════════════════════════════════════════════════════════ GAME (play.php) — HUD, feed, sidebar, minimap, textured containers I pattern/texture per-universo vivono in universes.css (body.u-* .tex). ══════════════════════════════════════════════════════════════════════ */ .play-wrap { position: relative; z-index: 0; max-width: 64rem; margin: var(--nav-height) auto 0; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; height: calc(100vh - var(--nav-height)); height: calc(100dvh - var(--nav-height)); /* dvh: esclude la barra URL dinamica mobile */ } /* Il footer di gioco NON è il footer del sito: annulla padding/bordo globali (base.css `footer { padding: 2rem; border-top; text-align:center }`). */ .play-wrap footer { padding: 0; border-top: none; text-align: left; font-size: inherit; } /* Contenitore "ambientato": colore base universo + pattern (da universes.css) */ .tex { background-color: var(--uni-bg-card); } /* Layout principale: feed + sidebar (1 colonna su mobile, 2 da md) */ .play-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; flex: 1; min-height: 0; } @media (min-width: 768px) { .play-grid { grid-template-columns: 1fr 16rem; } } .play-hud { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: center; padding: .5rem .75rem; } /* Pannello di gioco generico */ .gpanel { border: 1px solid var(--uni-border); border-radius: 4px; } /* Bolle messaggio: max-width sul lato corretto */ .msg-row.ai { justify-content: flex-start; } /* Scene hero (immagine location corrente come header del feed) */ .scene-hero { aspect-ratio: 21/9; max-height: 200px; overflow: hidden; border: 1px solid var(--uni-border); background: #000; position: relative; } .scene-hero img { width: 100%; height: 100%; object-fit: cover; transition: opacity .8s; } .scene-hero .scene-tag { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: .6rem .8rem .5rem; color: var(--uni-primary); font-family: var(--font-ui); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); } /* Thumbnail location nell'HUD */ .hud-thumb { width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--uni-border); } /* NPC / inventory mini-icons */ .icon-box { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: 1px solid var(--uni-border); background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pulse { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } } /* ── Minimap (colori dai token universo) ─────────────────────────────────── */ /* Wrapper scrollabile: la mappa resta a dimensione naturale (testo leggibile) e scrolla se più larga della sidebar, invece di rimpicciolirsi sotto i 5px. */ .minimap-wrap { max-height: 360px; overflow: auto; } .minimap { display: block; } .mm-edge { stroke: var(--uni-primary-dk); stroke-width: 1.5; } .mm-node circle { stroke-width: 1.5; } .mm-explored circle { fill: var(--uni-glow-soft); stroke: var(--uni-primary); } .mm-current circle { fill: var(--uni-primary); stroke: #fff; } .mm-revealed circle { fill: #000; stroke: #0e7490; stroke-dasharray: 3 2; } .mm-unknown circle { fill: #000; stroke: var(--uni-dim); stroke-dasharray: 2 3; } .mm-label { fill: var(--uni-text-dim); font-size: 13px; font-weight: 600; } .mm-current .mm-label { fill: #fff; } .mm-revealed .mm-label { fill: #22d3ee; } .mm-unknown .mm-label { fill: var(--uni-text-faint); } /* ── Utility helpers (small, semantic) ───────────────────────────────────── */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .wrap { flex-wrap: wrap; } .items-center { align-items: center; } .between { justify-content: space-between; } .flex-1 { flex: 1; } .gap-xs { gap: var(--gap-xs); } .gap-sm { gap: var(--gap-sm); } .gap-md { gap: var(--gap-md); } .mt-sm { margin-top: var(--gap-sm); } .mt-md { margin-top: var(--gap-md); } .mb-sm { margin-bottom: var(--gap-sm); } .mb-md { margin-bottom: var(--gap-md); } .muted { color: var(--uni-text-dim); } .faint { color: var(--uni-text-faint); } .accent { color: var(--uni-primary); } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-center { text-align: center; } .mono { font-family: var(--font-mono); } .ui { font-family: var(--font-ui); } .list-none { list-style: none; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gap-2xs { gap: var(--gap-2xs); } /* Visibilità per breakpoint (toggle sidebar mobile, bottoni desktop-only) */ .mobile-only { display: none; } /* Badge contatore sul pulsante "Azioni" (mobile) */ .actions-badge { position: absolute; top: -5px; right: -5px; min-width: 1rem; height: 1rem; padding: 0 .25rem; font-size: .6rem; line-height: 1rem; text-align: center; background: var(--uni-primary); color: #000; border-radius: 999px; font-weight: 700; } /* ══════════════════════════════════════════════════════════════════════ GAME (play.php) — MOBILE (< 768px) Stile chat (Telegram/WhatsApp): HUD compatto espandibile, feed che occupa gran parte dello schermo con l'immagine della location come sfondo, input sempre visibile, azioni in un bottom-sheet, sidebar a scomparsa da destra. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Pannelli fuori schermo (translateX/Y) non devono generare scroll */ html, body { overflow-x: hidden; } .mobile-only { display: inline-flex; } .desktop-only { display: none !important; } /* Più spazio possibile alla chat: guscio con padding minimo */ .play-wrap { padding: .5rem; padding-bottom: max(.4rem, env(safe-area-inset-bottom)); gap: .5rem; } /* ── HUD compatto: una riga; tap per espandere HP·TURNO·XP ── */ .play-hud { grid-template-columns: 1fr auto; gap: .15rem .6rem; padding: .4rem .6rem; cursor: pointer; } .hud-char { order: 1; min-width: 0; } .hud-loc { order: 2; gap: .35rem; } .hud-vitals { order: 3; grid-column: 1 / -1; } .hud-loc .hud-thumb { display: none; } .play-hud .truncate, .hud-char > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hud-chevron { color: var(--uni-text-faint); font-size: .8rem; } .play-hud:not(.hud-expanded) .hud-secondary { display: none; } /* Controlli rapidi nell'HUD (TTS, mappa): icone compatte */ .hud-btn { flex: 0 0 auto; padding: .1rem .4rem; font-size: .95rem; line-height: 1.2; } /* ── Riga input stile chat: ☰ azioni a sx, input largo, ➤ invio a dx ── */ .play-action-btn, .play-send-btn { flex: 0 0 auto; padding: .5rem .8rem; } .play-send-btn { font-size: 1.1rem; line-height: 1; } /* ── Griglia: solo il feed resta nel flusso ── */ .play-grid { grid-template-columns: 1fr; } /* La scene-hero diventa lo sfondo del feed → niente blocco dedicato */ .scene-hero { display: none; } /* !important per battere la texture universo `body.u-X .tex` (specificità più alta) */ .play-feed { background-image: linear-gradient(rgba(8,10,14,.62), rgba(8,10,14,.80)), var(--scene-bg, none) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* ── Sidebar mappa/inventario: pannello a scomparsa da destra ── */ .play-sidebar { position: fixed; top: var(--nav-height); right: 0; bottom: 0; width: min(86vw, 22rem); max-width: none; z-index: var(--z-modal); transform: translateX(100%); transition: transform .25s ease; border-left: 1px solid var(--uni-border); box-shadow: -8px 0 30px rgba(0,0,0,.6); } .play-sidebar.sidebar-open { transform: translateX(0); } .sidebar-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(0,0,0,.6); } /* ── Bottom-sheet azioni disponibili ── */ .play-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal); max-height: 60vh; overflow-y: auto; padding: .75rem .9rem calc(.9rem + env(safe-area-inset-bottom)); background: var(--uni-bg-card); border-top: 1px solid var(--uni-primary-dk); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.6); transform: translateY(110%); transition: transform .25s ease; } .play-actions.actions-open { transform: translateY(0); } .actions-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(0,0,0,.55); } .actions-sheet-head { width: 100%; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--uni-text-dim); padding-bottom: .4rem; margin-bottom: .2rem; border-bottom: 1px solid var(--uni-border); } /* Action buttons a piena larghezza nel sheet, comode da toccare */ .play-actions > .btn { flex: 1 1 100%; justify-content: flex-start; padding: .6rem .8rem; } }