e puo usare .pixel-btn, .pixel-panel, .pixel-card,
.pixel-title, .ui-menu come tutte le altre.
========================================================= */
:root {
--ui-bg: #05070d;
--ui-panel: rgba(6, 8, 16, 0.88);
--ui-panel-solid: #0b0e18;
--ui-line: rgba(255, 255, 255, 0.16);
--ui-accent: #ffc107;
--ui-danger: #ff5252;
--ui-success: #46d17f;
--ui-info: #46c8ff;
--ui-warn: #ff9f1a;
--ui-boss: #d16fff;
--ui-text: #f2f4f8;
--ui-muted: rgba(242, 244, 248, 0.55);
--ui-border: 3px solid #000;
--ui-shadow: 4px 4px 0 #000;
--ui-shadow-lg: 8px 8px 0 rgba(0, 0, 0, 0.7);
/* Rilievo interno: la riga chiara che stacca il pannello dal bordo nero */
--ui-bevel: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
/* =========================================================
PAGINA
========================================================= */
.ui-page {
font-family: 'Press Start 2P', monospace;
image-rendering: pixelated;
-webkit-font-smoothing: none;
background-color: var(--ui-bg);
color: var(--ui-text);
min-height: 100vh;
}
/*
Sfondo della pagina. Qui stanno solo inquadratura e colore di
fondo: l immagine la mette la pagina, sul proprio elemento.
Attenzione: NON passarla con una variabile usata da questo
foglio. Un url() dentro una custom property viene risolto
rispetto al CSS che la consuma, non rispetto alla pagina che
la dichiara, e finirebbe per puntare dentro Data/css.
*/
.inner-body {
background-color: var(--ui-bg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: background-image 0.2s ease-in-out;
}
.inner-body--fixed { background-attachment: fixed; }
/*
Trattamento "da cabinato": vignetta piu righe orizzontali.
Si mette sull elemento che fa da schermo; i figli vanno sopra
da soli, il velo non intercetta i click.
*/
.ui-veil { position: relative; }
.ui-veil::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.82) 100%),
repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}
.ui-veil > * { position: relative; z-index: 1; }
/* Come .ui-veil ma agganciato alla finestra: per le schermate
che occupano tutto lo schermo e non scorrono (scontro, tornei) */
.ui-veil--fixed::before { position: fixed; }
/* =========================================================
TESTI
========================================================= */
.pixel-title {
margin: 0;
color: var(--ui-accent);
font-size: clamp(13px, 2.2vw, 24px);
text-shadow: 3px 3px 0 #000;
text-transform: uppercase;
}
.pixel-title--small { font-size: clamp(9px, 1.3vw, 15px); }
.pixel-title--win { color: var(--ui-success); }
.pixel-title--lose { color: var(--ui-danger); }
.ui-muted {
color: var(--ui-muted);
font-size: 0.62rem;
line-height: 2;
}
.x-small { font-size: 0.6rem; }
/* =========================================================
PULSANTI
Il rilievo e dato da un ombra netta senza sfocatura: al
passaggio del mouse il pulsante si solleva, alla pressione
rientra. Le due proprieta hanno !important per avere la
meglio sulle utility di Bootstrap (bg-light, text-dark).
========================================================= */
.pixel-btn {
border-radius: 0;
box-shadow: var(--ui-shadow);
cursor: pointer;
transition:
transform 0.1s ease-in-out,
box-shadow 0.1s ease-in-out,
background-color 0.1s ease-in-out;
}
.pixel-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #000;
background-color: var(--ui-accent) !important;
color: #000 !important;
}
.pixel-btn:active {
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 #000;
}
.pixel-btn:disabled,
.pixel-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
filter: grayscale(1);
transform: none;
box-shadow: var(--ui-shadow);
}
/* Varianti: cambiano solo il colore di arrivo */
.pixel-btn-danger:hover { background-color: var(--ui-danger) !important; color: #1a0406 !important; }
.pixel-btn-success:hover { background-color: var(--ui-success) !important; color: #04140a !important; }
.pixel-btn-info:hover { background-color: var(--ui-info) !important; color: #04121a !important; }
/*
Pulsante di gioco: quello usato dalle schermate senza
Bootstrap addosso (scontro, tornei, dragon path). Fuori da
quelle conviene un .btn di Bootstrap con .pixel-btn sopra.
*/
.ui-btn {
display: inline-block;
padding: 10px 18px;
border: var(--ui-border);
border-radius: 0;
background: #f8f9fa;
color: #14161d;
font-family: inherit;
font-size: clamp(8px, 1.1vw, 12px);
font-weight: 700;
line-height: 1.6;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.ui-btn--small { padding: 6px 12px; font-size: clamp(7px, 0.9vw, 10px); }
/* Pulsante principale in fondo alla pagina: si deve vedere */
.ui-btn--wide { min-width: 220px; padding: 14px 20px; }
.ui-btn--primary { background: var(--ui-accent); }
.ui-btn--danger { background: var(--ui-danger); color: #fff; }
.ui-btn--success { background: var(--ui-success); color: #04140a; }
/* =========================================================
RIQUADRI
========================================================= */
/* Pannello di gioco: fondo scuro, bordo nero, rilievo interno */
.pixel-panel {
padding: clamp(12px, 2.4vh, 26px);
border: var(--ui-border);
border-radius: 0;
background: var(--ui-panel);
box-shadow: var(--ui-bevel), var(--ui-shadow);
}
.pixel-panel--center {
width: min(620px, 94vw);
margin: auto;
text-align: center;
}
.pixel-card {
border-radius: 0;
box-shadow: var(--ui-shadow-lg);
}
.bg-dark-transparent {
background-color: var(--ui-panel);
}
/* Riquadro centrato, la forma piu usata nei menu */
.ui-shell {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: clamp(12px, 3vw, 48px);
}
/* =========================================================
MENU
Elenco verticale di voci, usato dal menu principale e dai
sottomenu. Le voci sono .pixel-btn con un aspetto comune.
========================================================= */
.ui-menu {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ui-menu__item {
display: block;
width: 100%;
padding: 0.75rem;
border: 3px solid #14161d;
border-radius: 0;
background-color: #f8f9fa;
color: #14161d;
font-weight: 700;
font-size: 0.7rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
@media (min-width: 576px) {
.ui-menu__item { padding: 1rem; }
}
/* =========================================================
CAMPI
========================================================= */
.pixel-select,
.pixel-input,
.pixel-range {
border: var(--ui-border) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 #000;
}
.pixel-select:focus,
.pixel-input:focus {
border-color: var(--ui-accent) !important;
box-shadow: 3px 3px 0 #000;
outline: none;
}
input[type="range"].pixel-range {
-webkit-appearance: none;
appearance: none;
accent-color: var(--ui-accent);
background: transparent;
}
input[type="range"].pixel-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--ui-accent);
border: 2px solid #000;
box-shadow: 2px 2px 0 #000;
cursor: pointer;
}
input[type="range"].pixel-range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 0;
background: var(--ui-accent);
border: 2px solid #000;
cursor: pointer;
}
/* =========================================================
ETICHETTE
========================================================= */
.badge-active {
background-color: var(--ui-accent);
color: #000;
border: 2px solid #000;
border-radius: 0;
font-size: 0.6rem;
}
.ui-chip {
display: inline-block;
padding: 3px 6px;
border: 2px solid #000;
background: rgba(255, 255, 255, 0.08);
font-size: 0.55rem;
text-transform: uppercase;
}
/*
Scheda dei dati di una modalita: "Scontri 100", "Vite 3".
Le usano la presentazione dei tornei e il dragon path.
*/
.ui-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px;
}
.ui-fact {
padding: 12px 6px;
border: 2px solid #000;
background: rgba(255, 255, 255, 0.06);
}
.ui-fact__label {
display: block;
font-size: clamp(5px, 0.62vw, 8px);
color: var(--ui-muted);
}
.ui-fact__value {
display: block;
margin-top: 8px;
font-size: clamp(9px, 1.2vw, 14px);
font-weight: 400;
color: var(--ui-text);
}
/*
Striscia con l esito dell ultimo scontro, in cima alla
pagina a cui si torna. La usano tornei, dragon path e
l elenco delle missioni.
*/
.ui-banner {
padding: 10px 14px;
border: var(--ui-border);
box-shadow: var(--ui-shadow);
font-size: clamp(7px, 0.9vw, 11px);
line-height: 1.8;
text-align: center;
animation: uiBanner 380ms steps(3) 1;
}
.ui-banner--win { background: var(--ui-success); color: #04140a; }
.ui-banner--lose { background: var(--ui-danger); color: #1a0404; }
@keyframes uiBanner {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
CARICAMENTO
========================================================= */
.ui-loader {
display: inline-grid;
grid-template-columns: repeat(3, 12px);
gap: 4px;
}
.ui-loader i {
width: 12px;
height: 12px;
background: var(--ui-accent);
animation: uiLoader 1s steps(2) infinite;
}
.ui-loader i:nth-child(2) { animation-delay: 0.12s; }
.ui-loader i:nth-child(3) { animation-delay: 0.24s; }
.ui-loader i:nth-child(4) { animation-delay: 0.36s; }
.ui-loader i:nth-child(5) { animation-delay: 0.48s; }
.ui-loader i:nth-child(6) { animation-delay: 0.60s; }
.ui-loader i:nth-child(7) { animation-delay: 0.72s; }
.ui-loader i:nth-child(8) { animation-delay: 0.84s; }
.ui-loader i:nth-child(9) { animation-delay: 0.96s; }
@keyframes uiLoader {
0%, 100% { opacity: 0.18; }
50% { opacity: 1; }
}
/* =========================================================
PANNELLO DELLE RISORSE
Registro di caricamento in basso a destra, disegnato da
Data/js/resources.js. Si apre da solo mentre qualcosa sta
arrivando e si richiude quando ha finito.
========================================================= */
.ui-res {
position: fixed;
right: 8px;
bottom: 8px;
z-index: 3000;
width: min(290px, 60vw);
border: var(--ui-border);
background: rgba(5, 7, 13, 0.94);
box-shadow: var(--ui-bevel), var(--ui-shadow);
color: var(--ui-text);
font-family: 'Press Start 2P', monospace;
font-size: 8px;
line-height: 1.8;
user-select: none;
}
.ui-res__head {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
cursor: pointer;
}
.ui-res__label { color: var(--ui-accent); }
/* Barra di avanzamento: due div, nessuna immagine */
.ui-res__bar {
flex: 1 1 auto;
height: 8px;
border: 2px solid #000;
background: rgba(255, 255, 255, 0.1);
}
.ui-res__fill {
height: 100%;
width: 0;
background: var(--ui-accent);
transition: width 0.2s linear;
}
.ui-res--done .ui-res__fill { background: var(--ui-success); }
.ui-res--error .ui-res__fill { background: var(--ui-danger); }
.ui-res__list {
max-height: 132px;
margin: 0;
padding: 0 8px 8px;
overflow-y: auto;
list-style: none;
}
/*
Chiuso resta solo la percentuale, larga quanto basta: sulla
schermata di combattimento la fascia in basso e occupata
dalle carte, e un pannello intero darebbe fastidio.
*/
.ui-res--closed { width: auto; }
.ui-res--closed .ui-res__list { display: none; }
.ui-res--closed .ui-res__bar { display: none; }
.ui-res__row {
display: flex;
justify-content: space-between;
gap: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 3px 0;
color: var(--ui-muted);
}
.ui-res__row b {
flex: 1 1 auto;
overflow: hidden;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-res__row--ok span { color: var(--ui-success); }
.ui-res__row--fail span { color: var(--ui-danger); }
.ui-res__row--wait span { color: var(--ui-muted); }
/* =========================================================
LAMPO DI ESITO
Cartello a schermo intero a fine scontro, usato da tornei e
dragon path.
========================================================= */
.ui-flash {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
place-items: center;
padding: 20px;
background: rgba(0, 0, 0, 0.82);
text-align: center;
font-size: clamp(14px, 3vw, 34px);
text-shadow: 4px 4px 0 #000;
text-transform: uppercase;
animation: uiFlash 260ms steps(3) 1;
}
.ui-flash--win { color: var(--ui-success); }
.ui-flash--lose { color: var(--ui-danger); }
@keyframes uiFlash {
from { opacity: 0; }
to { opacity: 1; }
}
/* =========================================================
BARRE DI SCORRIMENTO
========================================================= */
.ui-scroll {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--ui-accent) #000;
}
.ui-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ui-scroll::-webkit-scrollbar-track { background: #000; }
.ui-scroll::-webkit-scrollbar-thumb { background: var(--ui-accent); border: 1px solid #000; }
/* =========================================================
SCELTA DELL ARENA
Griglia di anteprime usata da battle.html. Le immagini sono
gli sfondi veri di Data/Backgrounds, ridotti: cosi si sceglie
guardando, non leggendo un elenco di nomi.
========================================================= */
.arena-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 0.5rem;
width: 100%;
max-height: 52vh;
padding: 2px 4px 2px 2px;
}
/*
Ventidue anteprime non ci stanno nella colonna stretta usata
dagli elenchi di pulsanti: mentre si sceglie l arena la scheda
si allarga, poi torna com era. Vale solo da schermo grande in
su, sotto le colonne sono gia a tutta larghezza.
*/
@media (min-width: 992px) {
.battle-col--wide { width: 50%; }
}
.arena-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px;
border: 3px solid #14161d;
border-radius: 0;
background-color: #f8f9fa;
color: #14161d;
font-family: inherit;
text-align: center;
}
.arena-card__shot {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
image-rendering: pixelated;
background-color: var(--ui-bg);
border: 2px solid #14161d;
}
.arena-card__name {
font-size: 0.5rem;
line-height: 1.4;
font-weight: 700;
text-transform: uppercase;
overflow-wrap: anywhere;
}
/* Sorteggio: nessuna anteprima da mostrare, solo il punto interrogativo */
.arena-card--random .arena-card__shot {
display: grid;
place-items: center;
font-size: 1.4rem;
color: var(--ui-accent);
background-color: #14161d;
}
/* =========================================================
PANNELLO DEL SALVATAGGIO
Riquadro di settings.html che riassume un file .dbwc prima
di importarlo, e che mostra l esito dopo.
========================================================= */
.save-panel {
padding: 0.75rem;
border: 3px solid #14161d;
background-color: rgba(0, 0, 0, 0.55);
font-size: 0.55rem;
line-height: 1.8;
}
.save-panel__head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
color: var(--ui-accent);
overflow-wrap: anywhere;
}
.save-panel__list {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 0.5rem;
}
.save-panel__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
padding: 3px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: var(--ui-muted);
}
.save-panel__row b {
color: var(--ui-text);
font-weight: 400;
text-align: right;
overflow-wrap: anywhere;
}
.ui-note {
margin: 0 0 0.5rem;
line-height: 1.9;
}
.ui-note:last-child { margin-bottom: 0; }
.ui-note--ok { color: var(--ui-success); }
.ui-note--warn { color: var(--ui-accent); }
.ui-note--error { color: var(--ui-danger); }
.save-panel__actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
/* =========================================================
ACCESSIBILITA
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pixel-btn,
.inner-body,
.ui-res__fill {
transition: none !important;
}
.ui-loader i,
.ui-flash,
.ui-banner { animation: none !important; }
}