/* CLOUDFORGE — Steampunk-fantasy airship empire. Mobile-first game UI.
Not a webapp: an immersive dusk-sky HUD of brass, steam and floating iron.
Palette: dusk sky, satin brass framing, amber-gold energy, rust alerts,
oxidized-copper "patina" for tech, warm off-white ink. */
:root {
/* legacy slate tokens (kept so existing inline styles never break) */
--slate-0: #11161b; --slate-1: #19212a; --slate-2: #222d37; --slate-3: #2e3a45;
/* sky / atmosphere — tono verde-ottone (ripristino pre-v373, richiesta utente) */
--sky-0: #0a0f17; --sky-1: #101b28; --sky-2: #172a33; --horizon: #3a3322;
/* panels (warm-cool forged metal) */
--panel-0: #131a21; --panel-1: #1a242c; --panel-2: #243039;
/* Fondo del bottone neutro. Sono i valori storici, spostati in due token perche' una palette
possa riaccordarli: un esadecimale scritto dentro `.btn` non lo raggiunge nessuno. */
--btn-1: #2c353d; --btn-0: #181f25;
--edge-hi: rgba(255,228,176,.10); --edge-lo: rgba(0,0,0,.55);
/* brass framing */
--brass-d: #6a5126; --bronze-d: #7d6238; --bronze: #b08d57; --brass: #c39c5f; --brass-l: #eccd8e;
/* energy / status */
/* --rust-l sta a --rust come --amber-l sta a --amber: la versione leggibile in CORPO PICCOLO.
--rust puro a 11px maiuscoletto su fondo scuro è quasi illeggibile — serve per bordi, barre e
numeri, non per etichette. */
--amber: #e9b54a; --amber-l: #ffd97a; --rust: #c34b30; --rust-l: #d98a68; --patina: #67b9a8;
/* IL VIOLA DELLA GRANDE RICERCA. Nella tavolozza mancava un colore per l'ARCANO: ottone è
l'impero, ruggine è il Mondo Rosso, patina è la tecnica. La Ricerca non è nessuna delle tre —
è la cosa che apre un mondo — e finché portava l'ottone si leggeva come una consegna merci
col titolo in maiuscoletto. Stessa coppia degli altri: --viola per bordi e campiture,
--viola-l per il testo, perché il viola pieno a 10px su fondo scuro non si legge. */
--viola: #8257b0; --viola-l: #c8a9e8;
--ink: #ece6d8; --ink-dim: #97a1a9; --good: #79c08c;
--radius: 13px;
--tap: 44px;
--nav-h: 58px;
--safe-b: env(safe-area-inset-bottom, 0px);
--font-display: "Cinzel", "Times New Roman", Georgia, serif;
/* ═══ LA SCALA — vedi COSTITUZIONE.md ═══════════════════════════════════════════════
Non è inventata: è MISURATA su questo foglio. Prima di scriverla il CSS conteneva 127
valori px distinti, 184 padding diversi, 37 spaziature, 31 corpi di testo (mezzi pixel
compresi: 12.5, 10.5, 11.5 — nessuno li aveva decisi, si erano sedimentati). I passi
qui sotto sono quelli che l'app usa già di più, così convergere sposta ogni misura di
UN pixel o due: invisibile a schermo, ma da 37 valori si scende a 10.
REGOLA: nel CSS nuovo si usano SOLO questi. Un valore fuori scala lo blocca il test
tests/test_design_system.py — che è il vero motivo per cui questa scala sopravvivrà. */
/* Spazi (padding, margin, gap). Il nome dice i pixel: --sp-8 è 8px, e basta. */
--sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px;
--sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;
/* Raggi. Quattro, non diciotto. --radius resta l'alias storico della card. */
--r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
/* Il raggio della FAMIGLIA BOTTONI, e ha un token suo perche' e' una decisione, non un caso:
a 12 su un bottone alto 32 l'angolo si mangia il 37% del fianco e la cosa si legge come una
pillola. Un bottone qui e' una targa d'ottone avvitata alla plancia, e una targa ha lo
spigolo smussato, non arrotondato. Vale per tutte e tre le taglie: il raggio non scala con
l'altezza, se no i tasti piccoli sembrano di un altro insieme. */
--r-btn: 6px;
/* Corpi di testo. Niente mezzi pixel: non li distingue nessuno e moltiplicano i valori. */
--fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px; --fs-lg: 14px;
--fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 22px; --fs-4xl: 28px;
/* Altezze dei bottoni. Misurate anche queste: erano QUINDICI valori distinti (44, 40, 38, 36,
34, 32, 31, 30, 28, 27, 26, 24, 22, 20, 17) su 35 regole diverse, e nessuno li aveva decisi
— ogni schermata nuova ne inventava uno, e a volte l'altezza non era nemmeno dichiarata ma
usciva dall'icona dentro al bottone, che ne spingeva la scatola oltre il minimo.
Quattro passi bastano, e il nome dice a cosa serve, non quanti pixel è:
--btn-h azione normale: primaria, bronzo, secondaria a tutta riga
--btn-h-sm compatto: righe di tabella, testate di card, chat
--btn-h-xs pillola in riga, accanto a un contatore o dentro una card
--btn-h-micro tondo: il tasto (i), i +/− piccoli
Restano fuori solo cio' che bottone non e' per davvero — le Ali della Guerra (pannelli
verticali), la card dell'albero, i pallini d'allerta — e il tasto d'invio della chat, che
prende l'altezza dal contenuto per stare in riga con l'input. */
--btn-h: 32px; --btn-h-sm: 28px; --btn-h-xs: 24px; --btn-h-micro: 22px;
/* Ombre. SOLO scure (regola di casa: mai glow). Tre profondità, non centoventi. */
--sh-1: 0 1px 2px rgba(0,0,0,.35);
--sh-2: 0 4px 12px rgba(0,0,0,.45);
--sh-3: 0 12px 32px rgba(0,0,0,.55);
/* ═══ GLI STRATI ═══════════════════════════════════════════════════════════════════
Chi copre chi, dichiarato una volta. Prima erano 28 quote diverse da -2 a 9998,
decise una alla volta: i toast stavano SOTTO la chat (avvisi invisibili), le tendine
sotto i pannelli, e il carrello del Mercato sotto la barra di navigazione. */
--z-hud: 20; /* topbar e barre di stato agganciate all'header */
--z-nav: 30; /* dock di navigazione in basso */
--z-drawer: 40; /* strisce d'azione fisse in basso (carrello, checkout): SOPRA la nav */
--z-inline-pop: 50; /* tendine e popover che vivono DENTRO la pagina */
--z-panel: 80; /* pannelli a schermo intero (chat, mappa, rapporti, gilda) */
--z-dialog: 90; /* conferme: devono coprire il pannello che le ha aperte */
--z-pop: 95; /* popover agganciati al body: sopra i pannelli, sotto gli avvisi */
--z-toast: 100; /* avvisi: sopra tutto ciò che è contenuto */
--z-tutorial: 1200; /* spotlight: copre l'app perché è l'app che sta insegnando */
--z-consent: 5000; /* consenso cookie: prima di ogni altra cosa, per legge */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Touch-scrolled webapp: hide scrollbars everywhere (finger/wheel scroll still works).
The visible bar just clutters the immersive HUD. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
html, body { margin: 0; height: 100%; }
/* App-feel: la pagina è una "shell" fissa a tutto schermo — niente scroll di pagina,
niente rimbalzo laterale, niente pinch/doppio-tap zoom. Lo scroll vive dentro
.views e negli overlay. touch-action:manipulation toglie il doppio-tap-zoom;
il pinch è bloccato via JS (iOS ignora user-scalable=no). */
html { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none;
-webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Android/iOS: niente auto-inflate dei font */
body {
position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden;
overscroll-behavior: none; touch-action: manipulation;
background: var(--sky-0);
color: var(--ink);
font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px; line-height: 1.42;
-webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
b { font-weight: 700; }
small { font-size: 12px; }
/* ---- App-feel: spegni i comportamenti "browser" che rovinano l'esperienza webapp ----
niente selezione/evidenziazione testo, niente menù long-press "Salva immagine"/"Copia",
niente drag delle immagini. I CAMPI di testo restano selezionabili/editabili (eccezione). */
* {
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
-webkit-touch-callout: none; /* iOS: niente popup salva-immagine / copia al long-press */
}
input, textarea, [contenteditable="true"], select {
-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
-webkit-touch-callout: default;
}
img, svg, a, .acc-head, button { -webkit-user-drag: none; user-drag: none; }
/* ECCEZIONE PER-CAPITANO (19/08/2026): ai tag in `admin.text_select_tags` il client rimette la
classe `copiabile` sul (vedi applyState) e la selezione/copia torna quella del browser.
Solo il testo: il drag delle immagini e il pointer-events di restano spenti. */
html.copiabile, html.copiabile * {
-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
-webkit-touch-callout: default;
}
img { pointer-events: none; } /* niente drag/menù "salva immagine"; il tap arriva al contenitore.
NB: solo (arte/tile decorativi). Gli SVG restano cliccabili: worldmap, motore guerra, stemmi. */
/* ---- Atmosphere: fixed dusk sky + drifting cloud banks behind everything ---- */
.sky {
position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
/* Fascia d'orizzonte + bagliore parametrizzati: le palette per-isola li INTONANO alla
loro tinta (i default bruno-dorati stanno bene solo su blu/ruggine — su verde/viola/
cremisi sporcavano il colore: era il "qualcosa che non torna"). */
background:
radial-gradient(120% 75% at 50% 6%, var(--sky-glow, #1a2c3a) 0%, var(--sky-1) 38%, var(--sky-0) 78%),
linear-gradient(180deg, transparent 55%, var(--horiz-a, rgba(74,58,30,.45)) 86%, var(--horiz-b, rgba(120,82,34,.30)) 100%);
}
.sky::after { /* warm horizon glow + top vignette */
content: ""; position: absolute; inset: 0;
background:
radial-gradient(80% 40% at 50% 104%, var(--horiz-glow, rgba(233,181,74,.18)), transparent 70%),
radial-gradient(140% 90% at 50% -20%, transparent 60%, rgba(0,0,0,.55));
}
.cloud {
position: absolute; border-radius: 50%; filter: blur(26px); opacity: .5;
background: radial-gradient(closest-side, var(--cloud-c, rgba(120,150,170,.55)), transparent 70%);
animation: drift linear infinite;
}
.cloud-a { width: 70vw; height: 30vw; top: 12%; left: -30%; animation-duration: 70s; }
.cloud-b { width: 55vw; height: 24vw; top: 40%; left: -40%; opacity: .35; animation-duration: 95s; animation-delay: -30s; }
.cloud-c { width: 80vw; height: 34vw; top: 66%; left: -35%; opacity: .3; background: radial-gradient(closest-side, rgba(180,140,90,.5), transparent 70%); animation-duration: 120s; animation-delay: -60s; }
@keyframes drift { to { transform: translateX(165vw); } }
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; } }
/* overlay full-screen aperto (mappa/albero → body.wm-lock): le nuvole sono coperte e
comporle a 60fps sotto un velo opaco è lavoro sprecato — in pausa finché non riemergono */
body.wm-lock .cloud { animation-play-state: paused; }
/* DENTRO il gioco (post-login) le nuvole sono FERME: restano come sfondo statico, il drift
vive solo sulla schermata di login — zero compositing perpetuo durante la partita */
body.in-game .cloud { animation-play-state: paused; }
/* Gilda tab: the page atmosphere warms to a rust/ember dusk (navy→red-orange), so the
guild section feels distinct. Only the fixed .sky backdrop shifts — topbar & bottomnav
are opaque and untouched. The .5s fade makes the swap read as an animated transition. */
.sky, .sky::after, .cloud { transition: background 0.55s ease; }
/* (.empire-sky = Panoramica in scope Impero: stessa atmosfera rossa — vista collettiva)
(.varco-sky = l'Avamposto — vedi in fondo al blocco: deve stare DOPO `body.tab-azioni`) */
body.tab-gilda .sky, body.empire-sky .sky {
background:
radial-gradient(120% 75% at 50% 6%, #4a1e18 0%, #331512 40%, #1e0d0b 80%),
linear-gradient(180deg, transparent 52%, rgba(150,52,26,.42) 84%, rgba(196,86,34,.34) 100%);
}
body.tab-gilda .sky::after, body.empire-sky .sky::after {
background:
radial-gradient(80% 42% at 50% 104%, rgba(233,120,52,.24), transparent 70%),
radial-gradient(140% 90% at 50% -20%, transparent 58%, rgba(0,0,0,.55));
}
body.tab-gilda .cloud, body.empire-sky .cloud { background: radial-gradient(closest-side, rgba(200,96,54,.5), transparent 70%); }
body.tab-gilda .cloud-c, body.empire-sky .cloud-c { background: radial-gradient(closest-side, rgba(214,128,60,.5), transparent 70%); }
/* Mercato tab: atmosfera PULITA e fredda — uno showroom notturno azzurro-acciaio, più arioso del
navy di default e distinto dal rosso della gilda. Niente più marrone/fango. */
body.tab-mercato .sky {
background:
radial-gradient(120% 84% at 50% -6%, #35485c 0%, #223140 44%, #10171f 82%),
linear-gradient(180deg, transparent 52%, rgba(120,160,190,.14) 100%);
}
body.tab-mercato .sky::after {
background:
radial-gradient(80% 44% at 50% 104%, rgba(120,170,200,.16), transparent 70%),
radial-gradient(140% 90% at 50% -20%, transparent 60%, rgba(0,0,0,.42));
}
body.tab-mercato .cloud { background: radial-gradient(closest-side, rgba(150,185,215,.42), transparent 70%); }
body.tab-mercato .cloud-c { background: radial-gradient(closest-side, rgba(170,200,225,.42), transparent 70%); }
/* Azioni (esclusa la sottopagina Mercato, che ha già il suo cielo chiaro): qui le card-content
sono piccole e lo sfondo predomina → il fondo troppo nero pesava. Alziamo il "pavimento" del
gradiente da --sky-0 (il più scuro) a --sky-1 e ammorbidiamo la vignette. USA LE VAR DI PALETTE
(--sky-glow/--sky-1/--horiz-*): così vale per TUTTE e 5 le palette isola + il default madre,
ognuna resta della sua tinta, solo meno cupa (niente colori hardcoded che le cancellerebbero). */
body.tab-azioni .sky {
background:
radial-gradient(120% 82% at 50% 8%, var(--sky-glow, #1a2c3a) 0%, var(--sky-1) 40%, color-mix(in srgb, var(--sky-1) 42%, var(--sky-0)) 92%),
linear-gradient(180deg, transparent 55%, var(--horiz-a, rgba(74,58,30,.42)) 88%, var(--horiz-b, rgba(120,82,34,.28)) 100%);
}
body.tab-azioni .sky::after {
background:
radial-gradient(80% 40% at 50% 104%, var(--horiz-glow, rgba(233,181,74,.18)), transparent 70%),
radial-gradient(140% 90% at 50% -20%, transparent 62%, rgba(0,0,0,.42));
}
/* L'AVAMPOSTO — oltre il Varco il cielo di casa non c'entra. Stessa atmosfera di ruggine della
tab Gilda, e nessun colore nuovo: sono gli stessi tre gradienti.
QUESTA REGOLA DEVE STARE QUI, DOPO `body.tab-azioni`, e non lassu' con le sue gemelle.
L'Avamposto E' una sottopagina di Azioni, quindi le due classi convivono sul body; hanno la
stessa specificita' (0,2,1) e a parita' vince l'ultima scritta. Messa in alto perdeva sempre —
la classe c'era, il cielo restava azzurro, e non c'era niente di rotto da cercare. */
body.varco-sky .sky {
background:
radial-gradient(120% 75% at 50% 6%, #4a1e18 0%, #331512 40%, #1e0d0b 80%),
linear-gradient(180deg, transparent 52%, rgba(150,52,26,.42) 84%, rgba(196,86,34,.34) 100%);
}
body.varco-sky .sky::after {
background:
radial-gradient(80% 42% at 50% 104%, rgba(233,120,52,.24), transparent 70%),
radial-gradient(140% 90% at 50% -20%, transparent 58%, rgba(0,0,0,.55));
}
body.varco-sky .cloud { background: radial-gradient(closest-side, rgba(200,96,54,.5), transparent 70%); }
body.varco-sky .cloud-c { background: radial-gradient(closest-side, rgba(214,128,60,.5), transparent 70%); }
/* ---- Gear / loader ---- */
.gear {
width: 26px; height: 26px; display: inline-block; border-radius: 50%;
border: 5px solid var(--brass); border-top-color: transparent;
animation: spin 1.1s linear infinite;
/* glow rimosso */
}
.gear-big { width: 58px; height: 58px; border-width: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8,10,14,.6); z-index: 60; backdrop-filter: blur(2px); }
/* ---- Buttons (forged metal plates) ---- */
.btn {
min-height: var(--btn-h); padding: 0 16px; border: 1px solid #0b0f13;
display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* icona+label sempre centrati */
/* Un bottone NON si stira all'altezza della riga che lo contiene. Senza questa riga il token
e' una bugia: dentro un flex o una grid con `align-items: stretch` (che e' il default) il
bottone prende l'altezza del vicino piu' alto, e ne bastava uno per far sballare la riga.
E' cosi' che «Invita» risultava 38 con min-height 32, e «Vai a caccia» 44 con min-height 38. */
align-self: center;
/* Il fondo passa da due TOKEN invece che da due esadecimali scritti qui. I valori di default
sono gli stessi di prima al byte, quindi fuori dal Mondo Rosso non cambia un pixel: serve
perche' un fondo scritto a mano non lo raggiunge nessuna riaccordatura di palette, e su una
pagina di ruggine ogni bottone neutro restava azzurro-ardesia. */
background: linear-gradient(180deg, var(--btn-1), var(--btn-0));
color: var(--ink); border-radius: var(--r-btn); font-size: 14px; font-weight: 600; cursor: pointer;
letter-spacing: .2px; text-shadow: 0 1px 1px rgba(0,0,0,.55);
box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -2px 5px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.4);
transition: filter .12s, transform .04s, box-shadow .08s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 7px rgba(0,0,0,.6); }
/* IL FOCUS — col dito e col mouse NON si vede, con la tastiera si'.
Non c'era nessuna regola, quindi usciva l'anello AZZURRO di sistema: al primo tocco su un
tasto compariva un rettangolo blu che non c'entra niente con l'ottone di questo gioco, e ci
restava finche' non toccavi altrove.
`:focus-visible` e' il selettore che distingue i due casi — i browser lo accendono solo
quando la messa a fuoco arriva da tastiera. Quindi l'anello resta, ed e' giusto che resti
(senza, chi naviga col Tab non sa piu' dov'e'), ma in ottone e solo per chi ne ha bisogno. */
.btn:focus, .round-x:focus, .chat-x:focus, .mkc-x:focus, .mkt-cart-x:focus,
.sub-info:focus, .gr-info-btn:focus, .bnt-i:focus, .cf-info-btn:focus,
.navbtn:focus, .btn-ic:focus { outline: none; }
.btn:focus-visible, .round-x:focus-visible, .chat-x:focus-visible, .mkc-x:focus-visible,
.mkt-cart-x:focus-visible, .sub-info:focus-visible, .gr-info-btn:focus-visible,
.bnt-i:focus-visible, .cf-info-btn:focus-visible, .navbtn:focus-visible,
.btn-ic:focus-visible { outline: 2px solid var(--brass-l); outline-offset: 2px; }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
/* LA LIVREA DI CHI AGISCE — stessa ricetta di chi annulla, in ottone invece che in ruggine:
targa brunita, contorno e scritta del colore del metallo. Prima erano pieni di giallo con la
scritta nera, e in una schermata che di tasti ne ha otto gridavano tutti insieme: quello che
contava non si distingueva dagli altri, e l'occhio non sapeva dove posarsi.
Ora la gerarchia la fa il CONTORNO, non l'urlo: ottone = fai questo, ruggine = disfa questo,
niente bordo = secondario. Tre livree, una grammatica sola. */
/* Il giallo torna PIENO e la scritta torna NERA — come nella livrea storica — ma sopra la
targa, non al posto suo: resta il contorno d'ottone e resta il rilievo. E' la terza taratura,
e le prime due sbagliavano in versi opposti: il pieno originale gridava, la targa velata non
parlava piu'. Qui il tasto si vede da lontano e continua a stare dentro una grammatica —
ottone = fai questo, ruggine = disfa, niente bordo = secondario. */
/* TUTTI E TRE I GIALLI SULLA STESSA SCOCCA (04/08/2026, ordine del committente: «i tasti gialli
vecchi falli cosi'», indicando «Vai a caccia»).
`.btn-brass` era gia' arrivato dove serviva: cambia SOLO i due colori del fondo, e forma,
raggio, contorno, rilievo, peso e spaziatura arrivano da `.btn` — cioe' sono identici al
tasto neutro che gli sta di fianco. Questi due invece si ridichiaravano addosso tutto:
sfumatura a TRE fermate, contorno d'ottone chiaro, ombra portata all'ESTERNO invece che
incisa dentro, peso 700, spaziatura .3. Il risultato e' che in una riga con due bottoni non
sembravano due tasti della stessa schermata: sembravano un tasto e un'insegna.
La TINTA non cambia — amber per il primario, brass per il bronzo, gli stessi due estremi di
prima. Cambia la scocca sotto. */
.btn-primary { --btn-1: #ffd97a; --btn-0: #b8842c;
--bevel-lo: rgba(0,0,0,.32); --bevel-hi: rgba(255,250,235,.5);
color: #241a0b; text-shadow: none; }
.btn-primary .gi, .btn-primary .ricon { filter: brightness(0); }
.btn-bronze { --btn-1: #eccd8e; --btn-0: #a8813f;
--bevel-lo: rgba(0,0,0,.32); --bevel-hi: rgba(255,250,235,.5);
color: #241a0b; text-shadow: none; }
.btn-bronze .gi, .btn-bronze .ricon { filter: brightness(0); }
/* L'OTTONE SUL TELAIO NEUTRO — stesso giallo di `.btn-bronze`, stessa scocca del bottone base.
Serve dove un tasto in ottone sta ACCANTO a un tasto neutro e i due si leggono come una
coppia: all'Avamposto «Vai a caccia» e «Manda navi» stanno affiancati, e con due scocche
diverse non sembravano due bottoni della stessa schermata — sembravano un bottone e un titolo.
COSA CAMBIA RISPETTO A `.btn-bronze`, che resta la livrea giusta per una chiamata all'azione
isolata: la scocca. Il bronzo si ridichiara addosso tutto — sfumatura a TRE fermate, contorno
d'ottone chiaro, ombra portata all'esterno, peso 700, spaziatura .3 — e cosi' facendo esce
dalla grammatica del bottone base. Qui invece si cambiano solo i due colori del fondo: forma,
dimensioni, raggio, contorno e il suo colore, rilievo interno, peso e spaziatura arrivano tutti
da `.btn`, cioe' sono gli stessi identici del tasto neutro che gli sta di fianco. Il giallo e'
quello di prima al byte: le due fermate sono gli estremi della sfumatura del bronzo, e il punto
di mezzo cade su `--brass` come prima.
Le uniche due righe che NON si allineano al vicino sono l'ombra del testo e il filtro
dell'icona, e non e' incoerenza: il tasto neutro ha la scritta chiara su fondo scuro, questo ce
l'ha nera su ottone. Un'ombra scura sotto una scritta nera la impasta e basta, e un'icona
cromata su fondo chiaro sparisce. */
.btn-brass {
/* Sfumatura e velatura RITARATE, non ridisegnate: la tinta media resta quella di prima
(cade su `--brass`, come la fermata centrale del bronzo), cambia solo QUANTO viaggia.
Il motivo e' che il rilievo si misura in chiarezza percepita, non in alfa: gli stessi
valori del tasto neutro, su un fondo tre volte piu' chiaro, disegnavano una cupola dove
sulla ruggine si vedeva appena una piega. Numeri (in L*, la scala in cui l'occhio misura):
la sfumatura viaggiava 14,8 contro 12,1 e la velatura in basso 14,6 contro 8,8 — sommate,
il giallo era il 44% piu' bombato del suo vicino. Qui viaggiano 12,1 e 8,8, cioe' gli
stessi due numeri della ruggine. */
--btn-1: #e3c589; --btn-0: #b08742;
/* .26 pareggiava la ruggine al centesimo (8,8 di chiarezza persa in basso, come lei). Portata
a .32 su richiesta: sono 11 invece di 8,8 — mezza tacca sopra il vicino, non il 14,6 di
partenza. Il tasto riprende un filo di peso senza tornare a fare la cupola. */
--bevel-lo: rgba(0,0,0,.32);
/* Il filo di luce in alto e' l'unica cosa che NON si puo' pareggiare: su un fondo chiaro non
c'e' abbastanza spazio verso il bianco (servirebbe un L* oltre 100). Portato al massimo
credibile — oltre, diventa un riflesso cromato che nel resto del gioco non esiste. */
--bevel-hi: rgba(255,250,235,.5);
color: #241a0b; text-shadow: none;
}
.btn-brass .gi, .btn-brass .ricon { filter: brightness(0); }
.btn-ghost { background: rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); border-color: var(--brass-d); }
/* Variante ghost per lasciare/sciogliere/revocare. Il commento diceva che il `.btn-danger` PIENO
restava per i popup di conferma, «dove distruggere E' l'azione primaria»: non e' piu' vero, e
la ragione sta scritta sul `.btn-danger` qui sotto. Primaria non vuol dire invitante. */
.btn-ghost.danger { color: #e08a72; border-color: #7a2415; }
.btn-ghost.danger:hover { background: rgba(195,75,48,.12); }
/* Etichetta centrata nel bottone anche con icona iniziale: l'icona va nella fascia di padding
sinistra (fuori dal flusso), così la scritta resta centrata invece di "tendere a destra". */
.btn.btn-ctr { position: relative; padding-left: 34px; padding-right: 34px; }
.btn.btn-ctr .gi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
/* LA LIVREA DI CHI ANNULLA — targa brunita col contorno ruggine, non un mattone rosso pieno.
Era il contrario: pieno dappertutto, e spento solo sul tasto Richiama. Il pieno gridava piu'
dell'ottone, che nel gioco e' il colore del «fai questo»: nel popup di conferma il tasto piu'
acceso della schermata era quello che DISTRUGGE, e l'occhio ci cadeva sopra per primo.
Distruggere resta possibile e resta leggibile — il rosso c'e', nel bordo e nel testo — ma
smette di essere invitante. Chi vuole annullare lo trova; chi non voleva, non ci inciampa. */
.btn-danger {
background: linear-gradient(180deg, rgba(216,105,78,.16), rgba(141,46,28,.20));
color: #eca48f; border-color: #8a2e1c; font-weight: 600; letter-spacing: .3px;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 4px rgba(0,0,0,.32);
}
.btn-danger:hover { filter: none;
background: linear-gradient(180deg, rgba(224,120,92,.26), rgba(160,52,32,.30)); }
.btn-danger .gi { filter: none; opacity: .92; }
.btn-sm { min-height: var(--btn-h-sm); padding: 0 12px; font-size: 13px; border-radius: var(--r-btn); }
/* Full gold/amber buttons were tall & heavy — slim them down (the small ones keep .btn-sm's 36). */
.btn-primary, .btn-bronze { min-height: var(--btn-h); }
/* ...ma la TAGLIA batte la livrea, e queste due righe stanno DOPO apposta. `.btn-sm` e `.btn-xs`
sono dichiarate piu' su nel foglio, quindi la riga qui sopra le sovrascriveva: un
`btn-sm btn-bronze` usciva alto 32 e il `btn-sm btn-ghost` accanto a lui 28, e i due si
leggevano come due componenti diversi. Il colore dice COSA FA il tasto, la taglia dice QUANTO
SPAZIO occupa: due assi indipendenti, e la taglia non la decide il colore.
Senza nominare le livree: la prima stesura elencava `.btn-sm.btn-primary, .btn-sm.btn-bronze`
e cosi' rimetteva in piedi lo stesso difetto dall'altra parte — nella lista delle gilde lo
STESSO posto e' `btn-xs btn-bronze` (Unisciti) o `btn-xs btn-ghost` (Annulla la richiesta) a
seconda dello stato, e la riga saltava di otto pixel al cambio di stato. */
.btn-sm { min-height: var(--btn-h-sm); }
.btn-xs { min-height: var(--btn-h-xs); }
/* Il fondo e' di nuovo giallo pieno, quindi le icone tornano NERE come la scritta: su un fondo
chiaro un glifo d'ottone non si legge. `brightness(0)` le appiattisce a silhouette scura. */
.btn-primary .gi, .btn-bronze .gi, .btn-primary .ricon, .btn-bronze .ricon { filter: brightness(0); }
/* Contrasto GARANTITO: su qualsiasi bottone dorato/ambra la scritta resta SCURA, mai chiara su
giallo. Resta !important perche' batta ogni override di contesto — e' la regola che impedisce
a una schermata di rendersi illeggibile per una svista locale. */
.btn-primary, .btn-bronze, .btn-primary.btn-build, .btn-bronze.btn-build { color: #241a0b !important; }
/* Unified primary-action pill: compact, uppercase, rounded — one language for every
"commit" CTA (Costruisci, Invia spedizione, Attacca, Potenzia, Incastona, Riscuoti…)
so Isola / Azioni / Gilda / Profilo read consistently. */
.btn-build { min-height: var(--btn-h-xs); height: var(--btn-h-xs); padding: 0 16px; width: auto;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
font-size: 11px; text-transform: uppercase; letter-spacing: .7px; border-radius: 999px; }
.btn-build .gi, .btn-build .ricon { width: 15px; height: 15px; flex: none; }
/* In an action row (next to a stepper / secondary buttons) it hugs content, sits at the right.
Extra .btn specificity so it beats the later `.card-actions .btn { flex: 1 }` full-width rule. */
.card-actions .btn.btn-build, .gm-actions .btn.btn-build { flex: 0 0 auto; margin-left: auto; }
/* ---- Auth ---- */
.auth { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
/* Nota sotto un campo del form (es. spiegazione del codice amico). */
.field-hint { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--ink-dim); font-weight: 400; }
.field-hint b { color: var(--ink); }
.tag-hash { color: var(--ink-dim); font-weight: 700; }
/* Nuvoletta "Installa come app": spinge l'installazione PWA, esce a ogni login,
chiudibile. Nascosta se il gioco gira già installato (standalone). */
.install-hint {
position: fixed; left: 50%; transform: translateX(-50%);
top: calc(env(safe-area-inset-top, 0px) + 12px);
z-index: 55; width: min(92vw, 430px);
display: flex; gap: 12px; align-items: flex-start;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0));
border: 1px solid var(--brass); border-radius: 15px; padding: 12px 34px 12px 12px;
box-shadow: inset 0 1px 0 var(--edge-hi), 0 12px 34px rgba(0,0,0,.6);
animation: ih-pop .32s cubic-bezier(.2,.8,.3,1); cursor: pointer;
}
.install-hint::after { /* codina della nuvoletta, punta in alto */
content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%) rotate(45deg);
width: 15px; height: 15px; background: var(--panel-2);
border-left: 1px solid var(--brass); border-top: 1px solid var(--brass);
}
@keyframes ih-pop { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } }
.ih-icon {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
background: linear-gradient(180deg, var(--amber-l), var(--amber) 55%, #a8762a);
box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.ih-icon svg { width: 23px; height: 23px; display: block; } /* icona Condividi (box + freccia su) */
.ih-body { flex: 1; min-width: 0; }
.ih-body b { font-family: var(--font-display); color: var(--brass-l); letter-spacing: .5px; font-size: 14px; }
.ih-body p { margin: 2px 0 8px; font-size: 12px; line-height: 1.4; color: var(--ink); }
.ih-x { position: absolute; top: 5px; right: 7px; background: none; border: 0; color: var(--ink-dim); font-size: 16px; cursor: pointer; padding: 4px; line-height: 1; }
.ih-x:hover { color: var(--brass-l); }
/* Login backdrop: photo fills vertically, the horizontal excess pans very slowly (~45s,
cinematic) and a soft fade hides the loop reset so it's barely noticeable. */
.auth-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: url("/assets/images/login_bg.webp") no-repeat;
background-size: cover; background-position: 100% center;
animation: authPan 78s ease-in-out infinite; /* ~13% faster pan (login slider) */
}
.auth-bg::after { /* readability scrim over the artwork */
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 90% at 50% 28%, rgba(8,12,18,.32), rgba(8,12,18,.74) 82%);
}
@keyframes authPan {
0% { background-position: 100% center; opacity: 0; }
10% { opacity: 1; }
82% { background-position: 0% center; opacity: 1; }
100% { background-position: 0% center; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.auth-bg { animation: none; background-position: center; opacity: 1; }
}
.auth-card {
position: relative; z-index: 1; width: 100%; max-width: 420px;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0));
border: 1px solid #0c1116; border-radius: 18px; padding: 32px 20px 20px;
box-shadow: inset 0 1px 0 var(--edge-hi), 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(195,156,95,.12);
}
.auth-card::before, .auth-card::after {
content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--brass); opacity: .55;
}
.auth-card::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.auth-card::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
/* Selettore lingua nella pagina di login (in alto a destra della card) */
.auth-lang { position: absolute; top: 12px; right: 14px; display: flex; gap: 4px; z-index: 2; }
.auth-lang-btn { background: none; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px;
font-size: 18px; line-height: 1; cursor: pointer; transition: opacity .15s, color .15s;
/* Su Windows le emoji-bandiera diventano lettere monocrome (IT/GB): senza un colore chiaro
restano nere e illeggibili sul pannello scuro. Il color è ignorato dove le bandiere sono a colori. */
color: var(--ink-dim); opacity: .75; }
.auth-lang-btn:hover { opacity: 1; color: var(--ink); }
.auth-lang-btn.on { opacity: 1; color: var(--ink); border-color: var(--brass); background: rgba(195,156,95,.12); }
/* Nazionalità obbligatoria in registrazione */
.auth-nat { margin: 2px 0 4px; }
.auth-nat-lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.brand { text-align: center; margin-bottom: 20px; }
.brand-logo {
display: block; width: min(280px, 82%); height: auto; margin: 4px auto 2px;
/* filter glow rimosso */
animation: logo-float 5.5s ease-in-out infinite;
}
@keyframes logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .brand-logo { animation: none; } }
/* Settings logo pinned to the very top of the screen, OUTSIDE the sheet. The sheet
grows upward with its content until it reaches just below the logo, then scrolls. */
.settings-logo-top {
position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 0; right: 0;
z-index: 2; text-align: center; pointer-events: none;
}
.settings-logo-top img { width: min(190px, 52%); height: auto; filter: drop-shadow(0 4px 16px rgba(0,0,0,.55)); }
#settings-overlay .chat-sheet { max-height: calc(100% - env(safe-area-inset-top, 0px) - 128px); }
#settings-overlay .settings-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.brand h1 {
font-family: var(--font-display); letter-spacing: 7px; margin: 12px 0 6px; font-size: 30px; font-weight: 700;
color: transparent; background: linear-gradient(180deg, var(--brass-l), var(--bronze)); -webkit-background-clip: text; background-clip: text;
/* glow rimosso */
}
.tagline { color: var(--ink-dim); margin: 0; font-size: 13px; font-style: italic; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
flex: 1; min-height: var(--tap); background: linear-gradient(180deg, var(--panel-1), var(--panel-0)); color: var(--ink-dim);
border: 1px solid #0c1116; border-radius: 8px; font-weight: 600; cursor: pointer; letter-spacing: .3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tab.on { background: linear-gradient(180deg, var(--panel-2), var(--panel-1)); color: var(--brass-l); border-color: var(--bronze-d); box-shadow: inset 0 1px 0 var(--edge-hi); }
form label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 12px; letter-spacing: .3px; text-transform: uppercase; }
form input {
width: 100%; min-height: var(--tap); margin-top: 6px; padding: 0 12px; text-transform: none;
background: var(--sky-0); color: var(--ink); border: 1px solid #0b0f13; border-radius: 8px; font-size: 16px;
box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
}
form input:focus { outline: none; border-color: var(--brass); box-shadow: inset 0 2px 5px rgba(0,0,0,.45), 0 0 0 2px rgba(195,156,95,.22); }
#auth-submit { width: 100%; margin-top: 8px; }
.msg { min-height: 18px; color: var(--rust); font-size: 13px; margin: 2px 0 8px; }
.linklike { display: block; width: 100%; margin-top: 12px; padding: 4px; background: none; border: none; cursor: pointer; color: var(--brass-l); font-size: 12px; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
label .opt { color: var(--ink-dim); font-weight: 400; }
.hint { color: var(--ink-dim); font-size: 11px; text-align: center; margin: 16px 0 0; line-height: 1.5; }
.google-wrap { margin-top: 8px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 12px; margin: 12px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-d), transparent); }
.google-btn { display: flex; justify-content: center; min-height: var(--btn-h); }
/* ---- Game shell ---- */
.game { height: 100%; display: flex; flex-direction: column; }
/* Top HUD: forged instrument bar */
.topbar {
position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
padding: 9px 12px calc(9px + 1px); padding-top: calc(9px + env(safe-area-inset-top, 0px));
min-height: calc(88px + env(safe-area-inset-top, 0px)); /* floor ≥ tallest content (resource cells ~86px) so every tab — incl. Profilo — is identical height */
background: linear-gradient(180deg, #1d2a3b, #121a27);
border-bottom: 1px solid var(--bronze-d);
box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 var(--edge-hi);
}
.topbar::after { /* brass filigree under-rail */
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass-l) 50%, var(--brass) 80%, transparent); opacity: .5;
}
.topbar.under-attack { background: linear-gradient(180deg, #6e2a1d, #3a120c); border-bottom-color: var(--rust); }
/* battito d'allarme: velo bianco che pulsa in OPACITY su layer proprio (compositor) —
stesso effetto di brightness() ma senza ripitturare l'header a ogni frame */
.topbar.under-attack::before { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; background: #fff; opacity: 0; --pk: .12; animation: gpulse 1.1s infinite; }
/* pulse condiviso di tutta l'app: anima SOLO l'opacity (GPU, zero repaint); picco per-uso via --pk */
@keyframes gpulse { 0%, 100% { opacity: 0; } 50% { opacity: var(--pk, 1); } }
/* Anello ambra sull'input coordinate quando arrivi da mappa ▸ Colonizza: mostra che le
coordinate scelte sono già dentro il campo. Due battiti, poi torna normale. */
@keyframes coord-pulse {
0%, 70% { border-color: var(--amber); }
100% { border-color: var(--line); }
}
.coord-pulse { animation: coord-pulse 1s ease-out 2; }
/* 3 resource cells fill the left at equal width; a flexible empty column is the spacer
(graphic distance, no rule); the Energy cell is compact (content width) on the right. */
.res-cluster { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: stretch; min-width: 0; }
/* Con più isole legname/vapore/ottone aprono la panoramica isole: puntatore (energia ha già role=button). */
.topbar.multi-isl .res-cluster .res:not(.res-energy) { cursor: pointer; }
.res {
display: flex; flex-direction: column; align-items: stretch; line-height: 1.12; min-width: 0;
padding: 2px 0 4px;
}
/* the value sits above a live capacity gauge; hourly production / energy % read below it */
.res b { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.6); text-align: left; margin-top: 2px; }
/* capacity gauge: fill toward the storage cap (energy cell: load %). Colors follow state:
brass (ok) → amber (≥90%) → rust (full), so a "red" header explains itself at a glance. */
.rbar { display: block; height: 3px; margin: 4px 0; border-radius: 2px; overflow: hidden;
background: rgba(0,0,0,.5); box-shadow: inset 0 1px 1px rgba(0,0,0,.5); }
.rbar > i { display: block; height: 100%; width: 0; border-radius: 2px;
background: linear-gradient(90deg, var(--bronze), var(--brass-l)); transition: width .5s ease; }
.res.near .rbar > i { background: linear-gradient(90deg, var(--amber), var(--amber-l)); }
.res.full .rbar > i { background: linear-gradient(90deg, #8d2e1c, var(--rust)); }
.res-energy .rbar > i { background: var(--good); }
.res-energy.en-y .rbar > i { background: #ffd24a; }
.res-energy.en-o .rbar > i { background: #e8862e; }
.res-energy.en-r .rbar > i { background: var(--rust); }
/* name on the left, icon on the right; the label + value + prod all sit left-aligned in the cell */
.rtop { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 4px; }
.rname { color: var(--ink-dim); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.rprod { color: var(--good); font-size: 11px; font-variant-numeric: tabular-nums; text-align: left; }
.res.full .rprod { color: var(--rust); font-weight: 700; }
.res.full b { color: var(--amber-l); }
.ricon {
/* -4px e non `middle` (18/08/2026, ordine del committente: «numbers e svg sfasati»):
MISURATO sul DOM, `middle` piazzava il centro dell'icona 1,8px SOTTO il centro delle cifre
accanto (font 11px); a -4px lo scarto e' 0,5px, invisibile. Nei contenitori flex il
vertical-align e' ignorato e non cambia niente; i contesti con la loro taratura
(.ricon-txt, .quest-row) vincono per specificita' come prima. */
width: 18px; height: 18px; display: inline-block; vertical-align: -4px; flex: none;
background-size: contain; background-repeat: no-repeat; background-position: center;
/* vector SVG resources: scale crisply at any DPR, no pixelation needed */
}
.ricon-wood { background-image: url("/assets/resources/legno.svg?v=7"); }
.ricon-steam { background-image: url("/assets/resources/vapore.svg?v=5"); }
.ricon-brass { background-image: url("/assets/resources/ottone.svg?v=5"); }
.ricon-energy { background-image: url("/assets/resources/energia.svg?v=2"); }
/* inline energy bolt sized to the surrounding text (replaces the old energy emoji everywhere) */
.ricon.ricon-txt { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
/* ---- gi(): game-icons.net placeholder icons (tinted silhouettes) ----
Inline by default, sized to surrounding text like the energy bolt. The
.gi-coin modifier wraps the icon in a round brass medallion (dark disc +
ottone rim) for the framed placeholder slots; bare .gi stays transparent. */
.gi { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none;
background-size: contain; background-repeat: no-repeat; background-position: center; }
.gi-castle { background-image: url("/assets/ui/castle.svg?v=2"); }
.gi-chest { background-image: url("/assets/ui/chest.svg?v=1"); }
.gi-console { background-image: url("/assets/ui/console.svg?v=1"); }
.gi-bag { background-image: url("/assets/ui/bag.svg?v=2"); }
.gi-box { background-image: url("/assets/ui/box.svg?v=1"); }
.gi-target { background-image: url("/assets/ui/target.svg?v=1"); }
.gi-attack { background-image: url("/assets/ui/attack.svg?v=1"); }
.gi-speed { background-image: url("/assets/ui/speed.svg?v=2"); }
.gi-prod { background-image: url("/assets/ui/prod.svg?v=1"); }
.gi-ensave { background-image: url("/assets/ui/ensave.svg?v=1"); background-size: 80%; }
.gi-ptime { background-image: url("/assets/ui/ptime.svg?v=1"); }
.gi-defense{ background-image: url("/assets/ui/shield.svg?v=1"); }
.gi-hourglass { background-image: url("/assets/ui/hourglass.svg?v=1"); }
.gi-flamer { background-image: url("/assets/ui/flamer.svg?v=1"); }
.gi-cog { background-image: url("/assets/ui/cog.svg?v=1"); }
.gi-wrench { background-image: url("/assets/ui/wrench.svg?v=2"); }
.gi-envelope { background-image: url("/assets/ui/envelope.svg?v=1"); }
.gi-trophy-gold { background-image: url("/assets/ui/trophy-gold.svg?v=1"); }
.gi-trophy-silver { background-image: url("/assets/ui/trophy-silver.svg?v=1"); }
.gi-trophy-bronze { background-image: url("/assets/ui/trophy-bronze.svg?v=1"); }
/* HUD header buttons: size the gi icon to the 18px button glyph slot */
.hud-ico .gi { width: 21px; height: 21px; vertical-align: middle; }
/* Daily-reward gift medallion: red disc, with the brass frame kept ON TOP via the
two-layer clip (red → content-box, bronze rim → border-box padding ring). */
.icon-slot.ds-gift { background:
radial-gradient(120% 120% at 30% 20%, #b5352a, #6e130d),
conic-gradient(from 210deg, var(--bronze-d), var(--brass-l), var(--bronze-d));
background-clip: content-box, border-box; }
.gi-island { background-image: url("/assets/ui/island.svg?v=1"); }
/* Tre linee decrescenti: il segno universale di «filtri». Non c'era fra le 82 icone, e al suo
posto era finita prima una lente (che prometteva una ricerca inesistente) e poi un occhio. */
.gi-filter { background-image: url("/assets/ui/filter.svg?v=1"); }
/* ICONA TINTA — stessa silhouette, dipinta col colore corrente invece che con la sua art.
Le `.gi` sono immagini di sfondo, e un'immagine non si ricolora: qui la stessa SVG si usa come
MASCHERA e il colore lo mette `background-color: currentColor`. Cosi' basta un `color:` sul
contenitore e l'icona lo segue — che e' come funziona gia' tutto il resto del testo.
Serve alle isole nelle liste: ognuna porta il colore della SUA palette, quello scelto nella
vista Isola, e due colonie non si confondono piu' a colpo d'occhio. */
.gi.gi-tint { background-image: none; background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center; }
.gi.gi-tint.gi-island { -webkit-mask-image: url("/assets/ui/island.svg?v=1"); mask-image: url("/assets/ui/island.svg?v=1"); }
.gi.gi-tint.gi-castle { -webkit-mask-image: url("/assets/ui/castle.svg?v=2"); mask-image: url("/assets/ui/castle.svg?v=2"); }
/* La bandiera dei punti di controllo: prende il colore della gilda che tiene il punto, lo stesso
del rombo sul globo e dei ping di quella gilda. Bianca finche' e' libero. */
.gi.gi-tint.gi-flag { -webkit-mask-image: url("/assets/ui/flag.svg?v=2"); mask-image: url("/assets/ui/flag.svg?v=2"); }
/* Il teschio della caccia: bianco quando e' il Boss Mondiale, ruggine quando e' il Mondo Rosso.
Stessa sagoma, due colori — perche' e' lo stesso gesto (dare la caccia a una bestia) in due
posti diversi, e il colore dice QUALE dei due. */
.gi.gi-tint.gi-skull { -webkit-mask-image: url("/assets/ui/crest/skull.svg?v=1"); mask-image: url("/assets/ui/crest/skull.svg?v=1"); }
/* Il globo tingibile: azzurro e' il Mondo 1, rosso e' il Varco. Sono lo STESSO disegno con due
colori — perche' sono lo stesso oggetto (un mondo), e il colore e' l'unica cosa che cambia.
Un'altra sagoma direbbe «un'altra cosa», e non lo e'. */
.gi.gi-tint.gi-world { -webkit-mask-image: url("/assets/ui/world.svg?v=1"); mask-image: url("/assets/ui/world.svg?v=1"); }
/* Il microscopio della Grande Ricerca, azzurro ovunque compaia. La stessa tinta la faceva gia'
a mano la card di Isola ▸ Ricerche, con una regola tutta sua che rimascherava lo stesso file:
due modi di dipingere lo stesso disegno sono due disegni diversi appena qualcuno ne tocca uno.
Qui c'e' la maschera, il colore lo mette `.gi-patina`, e chi vuole il microscopio azzurro
scrive le stesse tre classi in tutti e due i posti. */
.gi.gi-tint.gi-microscope { -webkit-mask-image: url("/assets/ui/microscope.svg?v=1"); mask-image: url("/assets/ui/microscope.svg?v=1"); }
/* Le carte-dossier in chat tingono i loro glifi: lente e spade d'ORO nella fascia del titolo
(currentColor = il brass della fascia), spade in VERDE sulla riga dei compagni partiti. */
.gi.gi-tint.gi-swords { -webkit-mask-image: url("/assets/ui/swords.svg?v=3"); mask-image: url("/assets/ui/swords.svg?v=3"); }
.gi.gi-tint.gi-search { -webkit-mask-image: url("/assets/ui/search.svg?v=1"); mask-image: url("/assets/ui/search.svg?v=1"); }
.gi.gi-tint.gi-cargo { -webkit-mask-image: url("/assets/ui/box.svg?v=1"); mask-image: url("/assets/ui/box.svg?v=1"); }
.gi.gi-tint.gi-defense { -webkit-mask-image: url("/assets/ui/shield.svg?v=1"); mask-image: url("/assets/ui/shield.svg?v=1"); }
/* Le fasce dei rapporti condivisi in chat: senza la maschera `gi-tint` dipinge un quadrato
pieno del colore corrente — ed e' esattamente quel che si vedeva sulle carte Spedizione e
Condivisa. Ogni icona tinta deve avere la SUA maschera, qui. */
.gi.gi-tint.gi-compass { -webkit-mask-image: url("/assets/ui/compass.svg?v=1"); mask-image: url("/assets/ui/compass.svg?v=1"); }
.gi.gi-tint.gi-three-friends { -webkit-mask-image: url("/assets/ui/three-friends.svg?v=1"); mask-image: url("/assets/ui/three-friends.svg?v=1"); }
/* ROSSASTRO, non cremisi. Era #b4243a — un rosso freddo, quasi vinaccia — e su una card
scura leggeva come un avviso di pericolo invece che come una livrea. `--rust` e' il rosso
che il gioco usa gia' per il Mondo Rosso: e' lo stesso della barra della caccia nella
striscia, quindi il globo e il suo timer adesso sono della stessa tinta. */
.gi.gi-rosso { color: var(--rust); }
/* AZZURRO. La Grande Ricerca si fa QUI, di qua dal Varco: il rosso e' quello che si apre dopo. */
.gi.gi-patina { color: var(--patina); }
.gi-gem { background-image: url("/assets/ui/gem.svg?v=3"); }
.gi-diamond{ background-image: url("/assets/ui/diamond.svg?v=2"); }
.gi-diamond-gold{ background-image: url("/assets/ui/diamond-gold.svg?v=1"); }
.gi-hand { background-image: url("/assets/ui/hand.svg?v=1"); }
.gi-sailboat { background-image: url("/assets/ui/sailboat.svg?v=1"); }
.gi-swords { background-image: url("/assets/ui/swords.svg?v=3"); }
.gi-padlock { background-image: url("/assets/ui/padlock.svg?v=1"); }
.gi-anchor { background-image: url("/assets/ui/anchor.svg?v=2"); }
.gi-front-wing { background-image: url("/assets/ui/front-wing.svg?v=1"); }
.gi-front-wing-r { background-image: url("/assets/ui/front-wing-r.svg?v=1"); }
.gi-front-peak { background-image: url("/assets/ui/front-peak.svg?v=1"); }
.gi-bell { background-image: url("/assets/ui/bell.svg?v=2"); }
.gi-pencil { background-image: url("/assets/ui/pencil.svg?v=1"); }
.gi-three-friends { background-image: url("/assets/ui/three-friends.svg?v=1"); }
.gi-compass{ background-image: url("/assets/ui/compass.svg?v=1"); }
.gi-rocket { background-image: url("/assets/ui/rocket.svg?v=2"); }
.gi-crown { background-image: url("/assets/ui/crown.svg?v=1"); }
.gi-star { background-image: url("/assets/ui/star.svg?v=1"); }
.gi-person { background-image: url("/assets/ui/person.svg?v=1"); }
.gi-wanted { background-image: url("/assets/ui/wanted.svg?v=1"); }
.gi-dishonored { background-image: url("/assets/ui/dishonored.svg?v=1"); }
.gi-mountains { background-image: url("/assets/ui/mountains.svg?v=1"); }
.gi-warning{ background-image: url("/assets/ui/warning.svg?v=2"); }
.gi-lab { background-image: url("/assets/ui/lab.svg?v=2"); }
.gi-globe { background-image: url("/assets/ui/globe.svg?v=1"); }
.gi-world { background-image: url("/assets/ui/world.svg?v=1"); }
.gi-worldgold { background-image: url("/assets/ui/worldgold.svg?v=1"); }
.gi-worldbrown { background-image: url("/assets/ui/worldbrown.svg?v=1"); }
.gi-teamup { background-image: url("/assets/ui/teamup.svg?v=1"); }
.gi-flag { background-image: url("/assets/ui/flag.svg?v=2"); }
.gi-shieldcomb { background-image: url("/assets/ui/shieldcomb.svg?v=1"); }
.gi-handshake { background-image: url("/assets/ui/handshake.svg?v=1"); }
.gi-pig { background-image: url("/assets/ui/pig.svg?v=1"); }
.gi-pin { background-image: url("/assets/ui/pin.svg?v=1"); }
.gi-scroll { background-image: url("/assets/ui/scroll.svg?v=1"); }
.gi-megaphone { background-image: url("/assets/ui/megaphone.svg?v=6");
/* sagoma larga e bassa: lo slot .gi di default (1.15em) la rende minuscola →
ingrandisco l'icona ~2x e correggo l'allineamento verticale. */
width: 1.6em; height: 1.6em; vertical-align: -0.5em; }
.gi-chat { background-image: url("/assets/ui/chat.svg?v=1"); }
.gi-satellite { background-image: url("/assets/ui/satellite.svg?v=1"); }
.gi-ring { background-image: url("/assets/ui/ring.svg?v=1"); }
/* IL VARCO. Usata in sette punti (Grande Ricerca, Riserva, chip dell'Avamposto, righe di
volo) e per mesi non ha avuto una regola: `gi("portal")` produceva uno con una
classe che il CSS non conosceva, cioe' un rettangolo vuoto. Niente errore, niente 404 —
solo un buco dove doveva esserci un'icona. Presta l'anello finche' non c'e' un'arte sua:
un cerchio aperto e' la cosa piu' vicina a un varco fra le icone che ci sono. */
.gi-portal { background-image: url("/assets/ui/ring.svg?v=1"); }
/* La Grande Ricerca e' RICERCA prima che portale: l'anello che ci stava prima raccontava
l'arrivo, non il lavoro. Il microscopio dice cosa stai facendo — e l'azzurro lo tiene di
casa, perche' la ricerca si fa QUI: il rosso e' quello che si apre dopo. Nel gioco lo si
chiede sempre tinto (`gi gi-tint gi-patina gi-microscope`, la maschera sta lassu'); questa
e' la livrea nuda, per quando servira' su un fondo che il colore ce l'ha gia'. */
.gi-microscope { background-image: url("/assets/ui/microscope.svg?v=1"); }
/* Le ALTRE mute, trovate insieme al Varco (02/08/2026) misurando sulla pagina viva quali
classi `.gi-*` non avessero ne' `background-image` ne' `mask`. Sette punti del gioco
disegnavano un rettangolo vuoto — la lente della ricerca nello Storico, il cuore della
vita del Boss, la freccia di rientro, il pacco del Mercato. Prendono in prestito un'arte
che esiste: meglio un'icona vicina che un buco. */
.gi-magnifying-glass { background-image: url("/assets/ui/search.svg?v=1"); }
.gi-cargo { background-image: url("/assets/ui/box.svg?v=1"); }
.gi-warn { background-image: url("/assets/ui/warning.svg?v=2"); }
.gi-return-arrow { background-image: url("/assets/ui/anchor.svg?v=1"); }
.gi-info { background-image: url("/assets/ui/scroll.svg?v=1"); }
/* Innesti del Mondo Rosso: UNA sola icona per tutte le carte, come le carte di Ragnarok —
si riconoscono dal nome e dalla tendina, non dal disegno. Venticinque icone diverse in una
griglia da sei colonne sono rumore, e il ritratto della bestia sta gia' nella tendina. */
.gi-card { background-image: url("/assets/ui/card.svg?v=1"); }
.gi-gift { background-image: url("/assets/ui/gift.svg?v=2"); }
.gi-trophy { background-image: url("/assets/ui/trophy.svg?v=1"); }
.gi-medal { background-image: url("/assets/ui/medal.svg?v=1"); }
.gi-laurel { background-image: url("/assets/ui/laurel.svg?v=1"); }
.gi-eye { background-image: url("/assets/ui/eye.svg?v=1"); }
/* Bottega/negozio (delapouite, game-icons): bottone header + titolo del Negozio skin. */
.gi-shop { background-image: url("/assets/ui/shop.svg?v=2"); }
/* Mercato delle Nubi (delapouite «sell-card», game-icons): la carta con la merce e la mano
che la passa. Distinta da `gi-shop`, che resta dell'Emporio: i due tasti stanno uno
accanto all'altro e con la stessa icona si distinguevano solo per il fondo. */
.gi-sell-card { background-image: url("/assets/ui/sell-card.svg?v=4"); }
/* Ingrandisci (delapouite, game-icons): apre la vetrina del bundle. */
.gi-expand { background-image: url("/assets/ui/expand.svg?v=1"); }
/* Castone (diamante, game-icons): SOLO il premio del settimo giorno. Sta a parte da `gi-ring`
di proposito — quella e' l'ANELLO e la usano inventario, rapporti e schede oggetto: cambiarne
la sorgente per far contento un riquadro avrebbe spostato il disegno in mezzo gioco. */
.gi-diamond { background-image: url("/assets/ui/diamond.svg?v=2"); }
RIQUADRO non il viewBox: stringere il viewBox avrebbe
tagliato le frecce, che arrivano fino al bordo della figura (486 di lato su 510 di
riquadro). Il fondo e' `contain`, quindi il disegno scala per intero e resta centrato. */
/* Occhio "normale" (visione/intel): uso PUBBLICO (rapporti spia, aiuti). L'occhio onnisciente
(gi-eye) resta riservato ad admin/GM (dashboard, God Mode). */
.gi-sight { background-image: url("/assets/ui/sight.svg?v=1"); }
.gi-scrap { background-image: url("/assets/ui/scrap.svg?v=1"); }
.gi-hammer { background-image: url("/assets/ui/hammer.svg?v=1"); }
.gi-temple { background-image: url("/assets/ui/temple.svg?v=1"); }
.gi-search { background-image: url("/assets/ui/search.svg?v=1"); }
.gi-close { background-image: url("/assets/ui/close.svg?v=1"); }
.gi-skull { background-image: url("/assets/ui/crest/skull.svg?v=1"); } /* teschio bianco: boss nello strip + report */
.gi-coin { width: 1.9em; height: 1.9em; vertical-align: -0.55em; border-radius: 50%;
background-size: 64%; background-color: #241a0e;
box-shadow: inset 0 0 0 2px rgba(202,162,74,.7), inset 0 6px 10px rgba(76,58,34,.55), 0 1px 3px rgba(0,0,0,.4); }
.hud-right { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
/* ORA DI CLOUDFORGE nell'header (16/08/2026): TESTO NUDO su una riga, niente scocca da tasto —
in mezzo a sei quadrati d'ottone un settimo riquadro sarebbe stato solo rumore, e l'ora non e'
un comando. La propria ora non si ripete qui (ce l'hai sull'orologio del dispositivo): sta in
Profilo, insieme al fuso. Vale su desktop E su telefono, dove atterra nel vuoto lasciato dalla
molla dell'Emporium. */
/* La sigla si allinea al CENTRO dell'ora, non alla sua base: appoggiata sulla linea di scrittura
sembrava caduta in basso. Nessun effetto al passaggio: e' un'indicazione, non un comando. */
.cft-chip {
display: inline-flex; align-items: center; gap: var(--sp-6); flex: none; padding: 0 var(--sp-4);
white-space: nowrap; font-variant-numeric: tabular-nums;
/* Un pixel piu' in basso: le cifre del Cinzel poggiano alte nella loro scatola e accanto ai
tasti quadrati l'ora sembrava sollevata. Correzione OTTICA, non di allineamento. */
position: relative; top: 1px;
}
/* Le due parti si guardano quasi alla pari: l'ora scesa a 15 e la sigla salita a 11 in peso
pieno e tinta d'ottone chiara. Prima l'ora gridava e «CFT» spariva, e senza la sigla il numero
e' solo un numero — la sigla e' la meta' che dice DI CHI e' quell'ora. */
.cft-chip b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--brass-l); letter-spacing: .8px; }
/* La sigla nello STESSO ottone chiaro dell'ora: in bronzo scuro si spegneva sul fondo navy e
restava un'ombra. A distinguerle basta la misura. */
.cft-chip small { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; color: var(--brass-l); letter-spacing: .8px; }
@media (max-width: 560px) { .cft-chip small { font-size: var(--fs-sm); } }
/* SU TELEFONO E TABLET L'ORA STA SOLO IN PROFILO (16/08/2026, ordine del committente): accanto a
legname, vapore, ottone ed energia un quinto numero si legge come una quinta risorsa, e quella
barra deve dire una cosa sola. Sopra i 1100px l'header ha spazio e la tiene sempre. */
@media (max-width: 1099px) {
.cft-chip { display: none; }
.topbar.profile-mode .cft-chip { display: inline-flex; }
}
/* Strumenti GM nelle Impostazioni: due tasti affiancati che vanno a capo se non ci stanno.
Il pallino delle segnalazioni si appoggia al tasto, quindi il tasto fa da ancora. */
.set-gm { display: flex; gap: var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-10); }
.set-gm .btn { position: relative; }
/* Chi vive gia' nell'ora di Cloudforge (fuso automatico o scelto che coincide) non ha bisogno di
un secondo orologio uguale a quello del suo telefono: la sigla sparisce finche' non serve. */
.cft-chip.cft-inutile,
.topbar.profile-mode .cft-chip.cft-inutile { display: none; }
/* L'orologio delle IMPOSTAZIONI: CFT sopra, la tua ora sotto, cosi' lo scarto si legge
senza spiegazioni. (La card gemella in Profilo e' stata tolta: li' l'ora sta gia' in barra.) */
/* Fondo navy pulito e etichette in grigio-inchiostro: il gradiente finiva su un verde oliva e
le diciture erano in patina, e insieme davano al riquadro una velatura giallastra che non
c'entra niente col resto della plancia. */
.cft-box { border: 1px solid var(--brass-d); border-radius: 4px; padding: 8px 10px;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0)); }
.cft-box .cb-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cft-box .cb-riga + .cb-riga { margin-top: 4px; }
.cft-box .cb-et { font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--ink-dim); }
.cft-box b { font-family: var(--font-display); font-size: 16px; color: var(--brass-l); font-variant-numeric: tabular-nums; }
.hud-btn {
position: relative; width: 40px; height: var(--btn-h); flex: none; border-radius: 12px; cursor: pointer;
background: radial-gradient(120% 120% at 30% 20%, var(--panel-2), var(--panel-0));
border: 1px solid var(--bronze-d); color: var(--brass-l); font-size: 18px;
box-shadow: inset 0 1px 0 var(--edge-hi), 0 2px 5px rgba(0,0,0,.4);
display: grid; place-items: center;
}
.hud-btn:active { transform: translateY(1px); }
/* Il tasto dell'Emporio e' l'unico con la parola scritta accanto all'icona: fra quattro quadrati
identici, quello che porta al negozio deve dire cosa fa. Larghezza libera invece dei 40px
fissi, e la griglia diventa una riga per tenere icona e testo affiancati. */
.hud-btn.hud-btn-wide { width: auto; display: flex; align-items: center; gap: var(--sp-6); padding: 0 var(--sp-10); }
.hud-lbl { font-family: Cinzel, serif; font-size: 13px; font-weight: 600; letter-spacing: .02em;
white-space: nowrap; line-height: 1; }
.hud-ico { line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.hud-badge {
position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
border-radius: 999px; background: linear-gradient(180deg, var(--rust), #8d2e1c); color: #fff;
font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
border: 1px solid #2a0c06; /* glow rimosso */
}
/* Footer Impostazioni: build (commit git) discreto, centrato, in fondo alla schermata. */
.set-footer { text-align: center; font-size: 11px; margin: 12px 0 4px; opacity: .65; font-variant-numeric: tabular-nums; }
/* Pallino rosso "nuove segnalazioni" sull'occhio GM (solo a DXCH). */
.hud-dot {
position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ff7a5c, var(--rust) 60%, #8d2e1c);
border: 1.5px solid #2a0c06; /* glow rimosso */
animation: hudDotPulse 1.6s ease-in-out infinite;
}
@keyframes hudDotPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .hud-dot { animation: none; } }
/* Profilo identity box: full name + level, horizontal, height matched to the HUD buttons. */
.cap-id {
height: 40px; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px;
border-radius: 12px; color: var(--ink);
background: radial-gradient(120% 120% at 50% 0%, rgba(195,156,95,.18), rgba(0,0,0,.25));
border: 1px solid var(--bronze-d); box-shadow: inset 0 1px 0 var(--edge-hi);
}
/* Il box nome CEDE per primo quando lo spazio stringe (i tasti restano interi): il nome si
accorcia con "…" invece di mandare la barra in overflow. Il livello non si tocca mai. */
.cap-id #cap-name { font-family: var(--font-display); font-size: 14px; color: var(--brass-l); white-space: nowrap; letter-spacing: .3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cap-id .cap-lv { flex: none; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.cap-id .cap-lv b { color: var(--amber-l); font-size: 14px; font-family: var(--font-display); }
/* Energy = 4th resource cell: identical layout to .res, only the text colour shifts by load
band (green ≤95 · yellow 95–100 · orange 100–115 · red >115 or blackout). */
/* 4th cell: an elegant brass hairline (fades at both ends) sets the energy read-out apart from
the three stockpiles — the deliberate divider the original layout meant the spacer to imply. */
.res-energy { cursor: pointer; padding-left: 12px; border-left: 1px solid transparent;
border-image: linear-gradient(180deg, transparent 8%, rgba(207,170,104,.42), transparent 92%) 1; }
.res-energy b, .res-energy .rprod { color: var(--good); } /* green (default) */
.res-energy.en-y b, .res-energy.en-y .rprod { color: #ffd24a; } /* yellow 95–100% */
.res-energy.en-o b, .res-energy.en-o .rprod { color: #e8862e; } /* orange 100–115% */
.res-energy.en-r b, .res-energy.en-r .rprod { color: var(--rust); } /* red >115% / blackout */
/* Two-state header: default shows resources + energy; Profilo shows gear + comms + identity. */
/* I QUATTRO TASTI STANNO SEMPRE NELLA BARRA (15/08/2026, ordine del committente): Mercato,
Emporio, notifiche, opzioni — non piu' solo nella schermata Profilo. Restano fuori solo
`#cap-id` (l'identita' la porta gia' `.hud-cap` a sinistra) e la chat globale, che ha il
suo dock agganciato e in barra sarebbe un doppione. */
#settings-btn, #comms-btn, #cap-id, #wchat-btn { display: none; }
/* AGGANCIATA ALLA COLONNA DI DESTRA (15/08/2026, ordine del committente): i quattro tasti
stanno sulla verticale di MAPPA / STORICO / CLASSIFICHE, cioe' dove prima stava il ritratto
che abbiamo portato a sinistra. left/width glieli da' `positionWchatDock`, la stessa
funzione che misura la colonna: una geometria sola per tutti e due i blocchi dell'header. */
@media (min-width: 1100px) {
.topbar .hud-right { position: absolute; top: 0; bottom: 0; right: auto; margin: 0;
align-items: center; justify-content: flex-end; }
}
.topbar.profile-mode #settings-btn, .topbar.profile-mode #comms-btn, .topbar.profile-mode #wchat-btn { display: grid; }
/* Ordine (Guglielmo 25/07): SINISTRA nome+livello, bottega, occhio GM · DESTRA chat, posta,
ingranaggio. Il margin-left:auto sta sulla CHAT (primo del gruppo destro, sempre visibile):
è lei a staccarsi e portare con sé posta+ingranaggio, qualunque cosa sia nascosta a sinistra. */
/* IL NOME+LIVELLO NELLA BARRA NON C'E' PIU' (09/08/2026). Diceva le stesse tre cose che la
scheda sotto dice meglio dieci pixel piu' in basso — nome, tag e livello — e per farlo si
mangiava meta' della barra su telefono. L'elemento resta nel documento (lo cerca ancora il
passo del tutorial sul livello) ma non si mostra piu': lo spazio va ai tasti. */
.topbar.profile-mode #shop-btn { order: -2; }
/* ORDINE DELLA BARRA (15/08/2026, ordine del committente): da destra verso sinistra opzioni,
notifiche, Emporio, Mercato. `.hud-right` e' un flex normale, quindi l'ordine visivo da
sinistra e' l'inverso — e si scrive con `order` invece che spostando il markup, cosi' l'HTML
resta quello che era e le due schermate (gioco e Profilo) non divergono. Console e Occhio GM
non entrano nella conta: sono tasti di servizio, restano in testa alla fila. */
/* L'EMPORIUM NON E' UN TASTO COME GLI ALTRI. E' l'unico posto del gioco dove si spende denaro
vero, e deve leggersi cosi': fondo NERO invece dell'ottone di tutti, filo d'oro, e un box
piu' largo che si stacca dalla fila. Risalta per CONTRASTO, non per luce — niente glow. */
.topbar.profile-mode #shop-btn {
width: auto; padding: 0 var(--sp-16); margin-right: auto; /* ← la molla della barra */
/* Velatura d'oro dall'alto che si spegne quasi subito nel nero: la stessa aria dell'Emporium
— prevalentemente nero, con l'ottone che sfiora il bordo superiore. E' luce DIPINTA nel
fondo, non un alone: il divieto di glow riguarda le ombre luminose, non le velature. */
background: radial-gradient(120% 130% at 50% 0%, rgba(202,162,74,.30), #05060b 58%);
border-color: #caa24a;
color: #e9c87e;
}
/* L'ora sta SUBITO dopo l'Emporium, nel vuoto lasciato dalla sua molla: stesso `order` dei tasti
di servizio, ma prima nel documento, quindi prima anche a schermo. Per i capitani normali —
che Console e Occhio GM non li hanno — e' il primo elemento del gruppo di destra. */
.topbar.profile-mode #cft-chip { order: -1; }
.topbar.profile-mode #market-btn { order: 6; } /* riordinato nel blocco desktop */
/* L'ANCORA STA SULLA BOTTEGA, non sulla chat (09/08/2026). Era `margin-left:auto` sul tasto
chat: lui si staccava e portava a destra tutto il gruppo. Ma la chat SPARISCE sugli schermi
stretti — e senza di lei spariva anche l'unica molla della barra, cosi' `flex-end`
impacchettava tutto a destra e la bottega finiva in mezzo agli altri invece che al suo posto.
Adesso spinge la bottega: e' lei a restare a sinistra e a mandare il resto a destra. Quando
la bottega non si vede (chi non ha l'Emporium) non serve nessuna molla — `flex-end` fa gia'
quel che deve. Una molla sola: due margini automatici si spartirebbero lo spazio a meta'. */
.topbar.profile-mode #wchat-btn { order: 1; } /* right cluster: chat … */
.topbar.profile-mode #comms-btn { order: 2; } /* … poi posta … */
.topbar.profile-mode #settings-btn { order: 3; } /* … e ingranaggio */
.topbar.profile-mode .res-cluster, .topbar.profile-mode #energy-chip { display: none; }
.topbar.profile-mode .hud-right { flex: 1; justify-content: flex-end; }
/* Identità del capitano nell'header (solo desktop largo): nel gutter destro, sopra la colonna
del dock — il ritratto del Profilo col badge livello in fondo a destra, e alla sua sinistra
due righe: nome sopra, titolo sotto. left/width li mette positionWchatDock (stessa colonna). */
.hud-cap { display: none; }
@media (min-width: 1100px) {
/* ANCORATA AL BORDO SINISTRO DELLA COLONNA (15/08/2026, ordine del committente). Il blocco ha
già left/width della colonna del dock (li mette positionWchatDock): allineandolo a destra
galleggiava staccato dalla verticale di MAPPA / STORICO / CLASSIFICHE, e da lì l'effetto di
una cosa appesa fuori squadra. Da sinistra il ritratto cade sulla stessa riga d'inizio di
tutte le card sotto. */
.hud-cap { position: absolute; right: 20px; top: 0; bottom: 0; display: flex;
align-items: center; justify-content: flex-start; gap: 12px; pointer-events: none; }
/* Ritratto PRIMA, scritte dopo: si legge come ogni altra riga del gioco — icona a sinistra,
testo a destra. Nel DOM l'avatar resta secondo (non si tocca il markup): lo sposta `order`. */
.hud-cap .hud-avatar { order: -1; }
/* IL BLOCCO PORTA AL PROFILO, ma i clic li prendono SOLO il ritratto e le scritte: il
contenitore è alto quanto tutta la barra e largo quanto la colonna, e riaprirlo per intero
metterebbe una lastra invisibile sopra mezzo header. Il `pointer-events:none` di sopra resta
dov'è e serve proprio a questo. */
.hud-cap .hud-id, .hud-cap .hud-avatar { pointer-events: auto; cursor: pointer; }
/* Nessuna reazione al passaggio del mouse (16/08/2026): l'identita' in barra e' un'insegna,
non un tasto — il dito che la tocca ci arriva comunque, e il cursore basta a dire che porta
al Profilo. Le luci al passaggio le tengono i comandi veri. */
/* SOLO sull'header di produzione: nel Profilo l'identità è già nella scheda sotto. */
.topbar.profile-mode .hud-cap { display: none; }
.hud-id { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
gap: 2px; min-width: 0; }
/* Il bollo del livello sta SOPRA il ritratto: a 24px copriva mezzo mento del capitano. Qui è
più piccolo e rientra sul bordo invece di sporgere — l'illustrazione resta leggibile, che è
il motivo per cui il ritratto c'è. */
/* Armonia con le celle risorse: nome come i titoli (Cinzel, maiuscoletto largo, ottone),
titolo sotto piccolo e spento come le rese orarie. */
.hud-id .hud-id-name { font-family: var(--font-display); font-size: 14px; font-weight: 700;
color: var(--brass-l); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hud-id .hud-id-title { font-size: 11px; font-style: italic; color: var(--ink-dim);
letter-spacing: .3px; white-space: nowrap; }
#topbar .hud-avatar { display: grid; width: 56px; height: 56px; font-size: 28px; border-radius: 12px; }
/* IL RAGGIO INTERNO SEGUE QUELLO ESTERNO MENO IL BORDO: cornice 12 con bordo 2 -> 10.
A 8 l'immagine restava piu' squadrata della cornice e sugli angoli si vedeva lo stacco,
come una foto messa storta dentro il suo telaio. Scritto come sottrazione e non come `10px`
perche' 10 non e' una misura scelta: e' il raggio della cornice meno il suo bordo. Se un
giorno la cornice cambia curva, questo la segue da solo — ed e' anche il motivo per cui il
valore non deve stare sulla scala dei raggi: non e' un raggio, e' una differenza. */
#topbar .hud-avatar .av-img { border-radius: calc(var(--r-lg) - 2px); width: 100%; height: 100%; object-fit: cover; }
/* Il bollo del livello e' un SEGNO sul ritratto, non una targa: a 20px su un'illustrazione
dipinta ne mangiava un angolo. Rientrato sul bordo e ridotto, lascia il volto intero.
La regola sta qui e non su `.hud-cap` perche' quella, senza id, perdeva il confronto di
specificita' con questa e non si vedeva applicata. */
/* SPORGE DALLA CORNICE, in basso a destra: appoggiato dentro sembrava una toppa sul
ritratto; a cavallo del bordo torna a leggersi come un sigillo applicato sopra. */
#topbar .hud-avatar .pid-lv { right: -4px; bottom: -8px; min-width: 16px; height: 16px;
padding: 0 4px; font-size: var(--fs-xs, 10px); border-width: 1px; }
}
/* Per-tab "in progress" strip — thin live bars pinned just under the header. */
.progress-strip {
flex: none; display: flex; flex-direction: column; gap: 4px; padding: 4px 12px;
background: linear-gradient(180deg, #131c24, #0f1622);
border-bottom: 1px solid var(--bronze-d); box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.ps-row { display: flex; align-items: center; gap: 6px; }
.ps-ico { flex: none; width: 14px; text-align: center; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.ps-row .progress { flex: 1; height: 3px; margin-top: 0; border-radius: 4px; }
.ps-time { flex: none; min-width: 44px; text-align: right; font-size: 10px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
/* Selettore isola UNICO: PRIMA riga sotto l'header (sopra la strip), solo su Isola/Unità/Azioni.
È IL titolo dell'isola (nome · coordinate + matita) nello stile classico "due linee eleganti"
dei view-title, con velo laterale del colore identità. Con la SOLA isola madre è STATICO
(niente pallino, niente tendina); con ≥1 colonia il tap apre la tendina. Nessun caret. */
.island-bar {
flex: none; position: relative; display: flex; align-items: center; justify-content: center;
gap: 8px; min-height: 32px; padding: 4px 12px; cursor: pointer; user-select: none;
font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
color: var(--brass-l);
/* Linee SEMPRE d'oro (linguaggio dei view-title); l'identità dell'isola sta nello SFONDO:
pannello scuro della strip + alone tenue del colore isola centrato dietro il nome, che
sfuma a nulla verso i bordi. Cambio isola → l'alone vira di tinta. Zero glow. */
background:
radial-gradient(56% 150% at 50% 58%, color-mix(in srgb, var(--ib-col, #5b87c9) 22%, transparent), transparent 76%),
linear-gradient(180deg, #131c24, #0f1622);
border-bottom: 1px solid var(--bronze-d);
}
.island-bar.ib-static { cursor: default; }
/* Contenuto CENTRATO NELLA COLONNA (640px come #views): su schermi larghi frecce e nome non
finiscono più agli estremi dello schermo ma restano nella colonna di gioco.
touch-action: pan-y → lo swipe ORIZZONTALE resta al nostro handler (isola prev/next) mentre
lo scroll verticale della pagina passa oltre (iOS/Android non "rubano" il gesto). */
.island-bar { z-index: 31; touch-action: pan-y; }
.island-bar .ib-in { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 640px; margin: 0 auto; }
.island-bar .ib-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-d)); }
.island-bar .ib-line-r { background: linear-gradient(90deg, var(--bronze-d), transparent); }
.island-bar .ib-name { font-weight: 700; line-height: 1; transform: translateY(1px); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.island-bar .ib-coords { font-size: 11px; letter-spacing: 1px; color: var(--patina); font-variant-numeric: tabular-nums; transform: translateY(1px); }
.island-bar .pid-edit { font-size: 12px; }
/* Freccette ‹ › agli estremi della colonna: isola precedente/successiva (ciclico). Area di
tocco generosa, glifo d'ottone; si accendono d'ambra al tap. */
/* Il glifo ‹ › "casca" basso nella sua cassa tipografica: padding-bottom nella flombox lo
ricentra otticamente sulla riga del nome (leggerissimo offset verso l'alto). */
.island-bar .ib-arr { flex: none; width: 34px; height: 28px; margin: -2px -6px; padding: 0 0 2px; border: none; background: none;
color: var(--brass); font-family: var(--font-display); font-size: 22px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; }
.island-bar .ib-arr:active { color: var(--amber-l); }
/* Tendina IN-PLACE: si apre da SOTTO il selettore (niente più drawer dal fondo — costringeva
la mano a scendere fino al footer). Pannello ancorato alla barra, largo quanto la colonna. */
.islbar-drop { position: fixed; left: 50%; width: 100%; max-width: 640px; z-index: 59;
/* EDGE TO EDGE (16/08/2026, come le barre-risorsa sotto l'header): niente padding laterale
ne' superiore — le placche-isola corrono da bordo a bordo e la prima tocca subito l'header.
Il fondo resta 4: sotto c'e' la riga dei totali, testo nudo appoggiato all'elenco. */
padding: 0 0 4px;
/* Estensione dell'header (l'«ether»): stessa famiglia navy (topbar #1d2a3b→#121a27), un filo
più scura così legge come continuazione dell'header e non come un pannello grigio a parte. */
background: linear-gradient(180deg, #141d29, #0d1420);
border: 1px solid var(--bronze-d); border-top: none; border-radius: 0 0 12px 12px;
box-shadow: 0 14px 30px rgba(0,0,0,.6), inset 0 -1px 0 var(--edge-hi);
animation: ibddn .16s ease-out; transform: translateX(-50%); }
@keyframes ibddn { from { opacity: .35; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%); } }
.islbar-drop.ibd-closing { animation: ibdup2 .15s ease-in forwards; }
@keyframes ibdup2 { from { opacity: 1; transform: translateX(-50%); } to { opacity: 0; transform: translateX(-50%) translateY(-8px); } }
/* Ogni isola è una PLACCA tinta del SUO colore identità (--row-col): niente ping, il colore
vive nello sfondo (gradiente laterale) così si distingue a colpo d'occhio quale isola è quale. */
.islbar-drop .ib-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; column-gap: 10px; width: 100%; min-height: 48px; padding: var(--sp-4) var(--sp-12); margin: 0;
/* Colore-isola RICCO: mescolato con un blu scuro (non 'transparent' sopra un pannello chiaro,
che dava l'effetto pastello/slavato). Da saturo a sinistra a navy profondo a destra.
29/07: l'estremo chiaro sceso da 72% a 52% — a schermo intero le tre placche affiancate
facevano una fascia luminosa che tirava l'occhio via dal contenuto e dava fastidio. La
tinta si riconosce ancora a colpo d'occhio, ma sta sotto al testo invece che sopra. */
/* 16/08/2026: a tutta larghezza le placche al 52% erano TROPPO chiare, al 20% quasi
indistinguibili. Punto d'equilibrio 32%→15%: la tinta identita' si riconosce al volo,
ma la tendina resta della stessa famiglia scura del topbar. */
background: linear-gradient(90deg,
color-mix(in srgb, var(--row-col, #5b87c9) 32%, #0c111a),
color-mix(in srgb, var(--row-col, #5b87c9) 15%, #0c111a) 62%,
#0f1622 92%);
/* EDGE TO EDGE (16/08/2026): placche contigue a tutta larghezza, come le barre-risorsa
sotto l'header. UN SOLO filo tra una e l'altra: ogni riga porta solo il border-bottom,
i lati li fa il bordo della tendina, e niente ombra esterna che sporcherebbe la placca
sotto. Angoli vivi: la tessera non e' piu' un'isola nel pannello, E' la riga. */
border: none; border-bottom: 1px solid var(--bronze-d);
border-radius: 0; cursor: pointer; text-align: left; color: var(--ink); font: inherit;
box-shadow: inset 0 1px 0 var(--edge-hi);
transition: border-color .12s, transform .04s;
}
/* LA RIGA DEI TOTALI, in fondo. Stessa griglia delle righe-isola — `1fr auto` fuori e le tre
colonne da 46px dentro — perche' il suo lavoro e' proprio quello: stare INCOLONNATA sotto le
tre risorse, cosi' la somma si legge sotto i suoi addendi senza doverla cercare.
NIENTE LINEA DI SEPARAZIONE e margini stretti: la riga e' gia' l'ultima e non ha colore
d'isola, quindi si stacca da sola. Una linea piu' lo spazio che le serve intorno costavano
quasi quanto una quarta isola, per dire una cosa che si vedeva gia'.
E i numeri sono gli STESSI delle righe sopra — stesso corpo, stesso verde, stesso peso: sono
la somma di quelli, non un titolo. In grassetto e piu' grandi sembravano la voce principale e
le isole il dettaglio, che e' il contrario di come si legge questa tendina. */
.islbar-drop .ib-tot {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; column-gap: 10px; width: 100%; margin-top: 4px;
/* Le righe-isola edge-to-edge non hanno piu' bordi laterali: la loro gronda e' il solo
padding da 12. Qui idem — niente bordo-fantasma, stesso 12 — e le colonne combaciano. */
padding: 0 12px; border: none; }
.islbar-drop .ib-tot .ib-nm { font-size: 11px; color: var(--ink-dim); font-weight: 600; }
/* TUTTI SULLA STESSA RIGA DI SCRITTURA. `center` allinea i CENTRI delle scatole: con
l'etichetta a 11 e i numeri a 10 le quattro basi cadevano a quote diverse di poco — quel poco
che basta perche' la riga sembri storta senza che si capisca perche'. `baseline` allinea il
piede delle lettere, che e' come si legge una riga di testo. */
.islbar-drop .ib-tot,
.islbar-drop .ib-tot .ib-right,
.islbar-drop .ib-tot .ib-res { align-items: baseline; }
.islbar-drop .ib-tot .ib-r { justify-content: center; }
.islbar-drop .ib-row:active { transform: translateY(1px); }
/* Isola ATTIVA: bordo OTTONE come le altre e come il bordo inferiore dell'header (coerenza
grafica); la selezione si legge dal velo caldo + anello ambra INTERNO (niente cornice gialla). */
/* Isola ATTIVA, quarta passata (16/08/2026): SOLO CONTORNO — anello ambra pieno e basta,
niente velo caldo dentro («solo outline, non applicare film velatino»). Il fondo resta
quello delle sorelle, col suo velo d'identita'. */
.islbar-drop .ib-row.on {
border-color: var(--amber);
box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 0 0 1px var(--amber);
}
/* Nome + coord sulla STESSA riga a sinistra: la coord siede appena a destra del nome (non più in
una colonna staccata). min-width:0 sul nome così l'ellissi scatta e la coord non viene spinta via. */
.islbar-drop .ib-row .ib-hd { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.islbar-drop .ib-row .ib-nm { font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; color: var(--brass-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.islbar-drop .ib-row.on .ib-nm { color: var(--amber-l); }
.islbar-drop .ib-row .ib-co { font-size: 10px; color: var(--patina); font-variant-numeric: tabular-nums; flex: none; }
/* SINISTRA: su MOBILE impilata (nome sopra, «Liv. N · coord» sotto); su DESKTOP tutto su UNA riga
(nome + livello·coord a destra del nome), allineato a sinistra. */
.islbar-drop .ib-row .ib-hd { flex-direction: column; align-items: flex-start; gap: 2px; }
.islbar-drop .ib-row .ib-sub { font-size: 10px; color: var(--patina); font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (min-width: 620px) {
.islbar-drop .ib-row .ib-hd { flex-direction: row; align-items: baseline; gap: 8px; }
.islbar-drop .ib-row .ib-sub { flex: none; }
}
/* Livello GIALLO (più visibile del patina): è il primo token della sotto-riga. */
.islbar-drop .ib-row .ib-sub .ib-lv, .islbar-drop .ib-row .ib-lv { color: var(--amber-l); font-weight: 700; }
/* DESTRA in RIGA: slot navi a SINISTRA della produzione (stessa riga orizzontale), allineati a destra. */
.islbar-drop .ib-row .ib-right { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
.islbar-drop .ib-row .ib-ships { font-size: 10px; color: var(--patina); font-variant-numeric: tabular-nums;
display: inline-flex; align-items: center; gap: 4px; line-height: 1; flex: none; }
.islbar-drop .ib-row .ib-ships .gi { width: 12px; height: 12px; flex: none; opacity: .85; }
/* Produzione oraria in verde piccola SOTTO la barretta (come il +/h dell'header). */
.islbar-drop .ib-rp { font-size: 10px; line-height: 1; color: var(--good); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Colonna stock: 3 celle FISSE, icona+valore con SOTTO un GAUGE incassato (fill ottone; ruggine
quando il deposito è quasi pieno) — stessa lingua delle barre del gioco. */
.islbar-drop .ib-res { display: grid; grid-template-columns: repeat(3, 46px); column-gap: 8px; justify-content: end; }
.islbar-drop .ib-r { display: flex; flex-direction: column; gap: 2px; }
.islbar-drop .ib-rv { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.islbar-drop .ib-rv .ricon { width: 11px; height: 11px; flex: none; }
.islbar-drop .ib-rbar { height: 4px; border-radius: 4px; background: #0c1016; overflow: hidden;
border: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.islbar-drop .ib-rbar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--brass-l), var(--bronze)); }
.islbar-drop .ib-rbar.full > i { background: linear-gradient(180deg, #c86a4a, var(--rust)); }
/* Toggle "Impero" della Panoramica: interruttore d'ottone, allineato a destra su una riga sola.
Binario scuro incassato; pomello d'ottone che scorre; acceso = velo ambra (niente glow). */
.pano-empire { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 2px 10px; }
.pano-empire .pe-lbl { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 4px; }
.pano-empire .pe-lbl .gi { width: 14px; height: 14px; }
.cf-toggle {
position: relative; width: 44px; height: 24px; padding: 0; cursor: pointer; border-radius: 999px;
background: linear-gradient(180deg, #0c1116, #141c24); border: 1px solid var(--bronze-d);
box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
transition: background .15s, border-color .15s;
}
.cf-toggle > i {
position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: linear-gradient(180deg, #3a4550, #232c34); border: 1px solid #0b0f13;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.5);
transition: left .16s ease, background .15s;
}
.cf-toggle.on { background: linear-gradient(180deg, rgba(233,181,74,.30), rgba(233,181,74,.14)); border-color: var(--amber); }
.cf-toggle.on > i { left: 22px; background: linear-gradient(180deg, var(--brass-l), var(--bronze)); border-color: #5d4828; }
/* Strip Isola: gruppi SEPARATI (Costruzioni / Flotta), ognuno espandibile → la sua coda + ETA. */
.ps-expandable { padding: 0; }
.ps-group + .ps-group { border-top: 1px solid rgba(255,255,255,.06); }
/* Strip Azioni: niente rail sinistro colorato (l'icona di categoria basta come indicatore). */
.ps-group.ps-acc { position: relative; }
/* In una strip espandibile (padding:0) SOLO la war row (riga piatta, figlia diretta) perde
l'inset: glielo ridò e la separo dai gruppi sotto. NB: figlia DIRETTA, così non tocco le
.ps-row dentro i toggle (Isola/Azioni/gilda) che hanno già il loro padding. */
.ps-expandable > .ps-war { padding: 4px 12px; }
.ps-war + .ps-group { border-top: 1px solid rgba(255,255,255,.06); }
/* Spedizione di gilda estesa: UNA riga con tutti i capitani in orizzontale; l'eccedenza scorre (swipe). */
.ps-gexp-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ps-gexp-row::-webkit-scrollbar { display: none; }
.ps-gexp-chip {
flex: none; white-space: nowrap; font-size: 10px; line-height: 1;
padding: 4px 8px; border-radius: 999px; color: var(--ink-dim);
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
font-variant-numeric: tabular-nums;
}
.ps-gexp-chip.me { color: var(--amber-l); border-color: rgba(233,181,74,.4); background: rgba(233,181,74,.1); }
/* Leader della lobby: Fondatore = arancione, Ufficiale = viola (identifica chi ha indetto la spedizione) */
.ps-gexp-chip.lead-admin { color: #f0a24b; border-color: rgba(240,162,75,.5); background: rgba(240,162,75,.12); }
.ps-gexp-chip.lead-off { color: #c79bf0; border-color: rgba(199,155,240,.5); background: rgba(199,155,240,.12); }
.ps-gexp-eta { margin-top: 6px; font-size: 11px; }
.ps-gexp-eta b { color: var(--brass-l); font-variant-numeric: tabular-nums; }
/* Dettaglio Guerra del Pinnacolo: fase attuale → prossima. */
.ps-war-phase { font-size: 11px; color: var(--ink); white-space: nowrap; }
.ps-war-phase .az-dir { margin: 0 4px; }
/* Note di aggiornamento (Impostazioni): collassabile + navigazione tra le patch. */
.pn-details > summary { cursor: pointer; list-style: none; user-select: none; }
.pn-details > summary::-webkit-details-marker { display: none; }
.pn-details > summary::after { content: "▸"; float: right; color: var(--brass-l); transition: transform .15s ease; }
.pn-details[open] > summary::after { transform: rotate(90deg); }
.pn-body { margin-top: 10px; }
.pn-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pn-arrow {
flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
background: var(--panel-2); border: 1px solid var(--bronze-d); color: var(--brass-l);
font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.pn-arrow:disabled { opacity: .3; cursor: default; }
.pn-head { flex: 1; min-width: 0; text-align: center; font-size: 13px; }
.pn-head .pn-sub { font-size: 11px; margin-top: 1px; }
.pn-count { font-size: 10px; margin-top: 1px; }
.pn-sec { margin-top: 8px; }
.pn-sec-t { font-size: 11px; font-weight: 700; color: var(--brass-l); margin-bottom: 2px; }
/* NIENTE PALLINI. Le voci di una nota di aggiornamento sono paragrafi, non un elenco della
spesa: ognuna apre con la sua frase in grassetto, che e' gia' il suo capo. Il pallino
davanti le faceva sembrare appunti, e su una sezione da una voce sola era un pallino
solitario in mezzo al vuoto. Restano le voci separate, spaziate, senza segni. */
.pn-list { margin: 0; padding-left: 0; list-style: none; }
.pn-list li { font-size: 12px; color: var(--ink); margin: 0 0 8px; line-height: 1.45; }
.pn-list li:last-child { margin-bottom: 0; }
/* Direzione attacco: freccetta → in andata, ← in rientro (al posto delle emoji). */
.az-dir { color: var(--brass-l); font-weight: 700; }
.ps-toggle {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 4px 12px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
}
.ps-toggle .ps-row { flex: 1; min-width: 0; }
.ps-count { flex: none; min-width: 16px; text-align: center; font-size: 10px; color: var(--brass-l); font-variant-numeric: tabular-nums; }
.ps-chevron { flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--brass-l); border-bottom: 1.5px solid var(--brass-l);
transform: rotate(45deg); margin-top: -2px; opacity: .8; transition: transform .18s ease; }
.ps-group.ps-open .ps-chevron { transform: rotate(225deg); margin-top: 2px; }
/* Slide fluido: l'altezza è guidata dalla Web Animations API (slideDetail in app.js) — una
sola animazione ottimizzata invece del ricalcolo di grid-template-rows a ogni frame, che su
mobile scattava. Lo stato a riposo è puro CSS (chiuso height:0, aperto height:auto); il fade
dell'opacità resta in composizione GPU. */
.ps-detail { overflow: hidden; height: 0; }
.ps-group.ps-open .ps-detail { height: auto; }
.ps-detail-in { opacity: 0; transition: opacity .2s ease; will-change: opacity; }
.ps-group.ps-open .ps-detail-in { opacity: 1; }
.ps-detail-pad { padding: 4px 12px; } /* simmetrico + compatto → contenuto centrato, area più piccola */
.ps-drow { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 11px; }
.ps-drow:first-child { border-top: 0; } /* niente linea sopra la prima riga: centra il singolo item */
/* X per annullare una costruzione in attesa: a DESTRA, subito prima del tempo (dove stava la
vecchia icona pausa, ora rimossa). Placeholder ps-dx-sp per le righe non annullabili, così
i tempi restano allineati in colonna. */
.ps-dx { flex: none; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer;
color: var(--ink-dim); font-size: 12px; line-height: 1; border-radius: 4px; transition: color .12s, background .12s; }
.ps-dx:hover { color: #e6604d; background: rgba(230,96,77,.14); }
.ps-dx-sp { flex: none; width: 16px; }
.ps-dico { flex: none; width: 14px; text-align: center; }
.ps-dico .gi { width: 12px; height: 12px; opacity: .85; }
.ps-dname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ps-dtime { flex: none; min-width: 52px; text-align: right; font-size: 10px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
/* Riga in attesa: durata di produzione FERMA (non un countdown), solo attenuata. L'icona pausa
che stava qui è stata rimossa: quel posto ora è della X di annullamento (vedi .ps-dx). */
.ps-drow.is-waiting .ps-dtime { opacity: .6; }
.ps-dempty { padding: 4px 0; }
.ps-dtotal { display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--bronze-d); font-size: 11px; }
.ps-dtot-t { display: inline-flex; align-items: center; gap: 4px; color: var(--brass-l); }
.ps-dtot-t .gi { width: 11px; height: 11px; }
.ps-dtot-t b { font-variant-numeric: tabular-nums; }
/* Phase-aware Guerra del Pinnacolo clock (bespoke strip row) — icon · bar · timer,
all vertically centered on one line (fixed-width ends so nothing shifts). */
.ps-war { align-items: center; }
.ps-war-ico { flex: none; width: 16px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.ps-war-ico .gi { width: 13px; height: 13px; }
.ps-war-bar { flex: 1; display: flex; align-items: center; }
.ps-war-bar .progress { flex: 1; height: 3px; margin-top: 0; border-radius: 4px; }
.ps-war-timer { flex: none; display: inline-flex; align-items: center; gap: 2px; min-width: 60px; justify-content: flex-end; line-height: 1; }
.ps-war-timer .gi { width: 10px; height: 10px; opacity: .8; }
.ps-war-timer .ps-time { min-width: 0; }
/* LIVE battle: red bar + blinking red dot (no label) */
.ps-war.is-live .progress > i { background: linear-gradient(90deg, #ff5436, #c4231b); }
.ps-war.is-live .ps-time { color: #ff9d85; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; /* glow rimosso */ animation: recPulse 1.1s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }
/* ---- Views ---- */
/* min-height:0 lets this flex child shrink and become the internal scroller, so the
header + production strip stay pinned (an extension of the header) instead of the
whole page scrolling and carrying the strip away. */
.views { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px calc(var(--nav-h) + var(--safe-b) + 18px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Centered like the rest of the layout, with fading rails on BOTH sides (matches .view-sep). */
.view-title {
font-family: var(--font-display); font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
color: var(--brass-l); margin: 6px 2px 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
text-align: center;
}
.view-title::before { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze-d)); }
.view-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bronze-d), transparent); }
/* Pulsante "indietro" nelle schermate di ricerca: fuori dal flusso, tutto a destra → il titolo
resta centrato tra le linee decorative. */
.view-title.vt-back-wrap { position: relative; }
.view-title .vt-back { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; }
.subtle { color: var(--ink-dim); font-size: 12px; }
/* ---- Panels / cards (forged modules) ---- */
.card {
position: relative;
background: linear-gradient(180deg, var(--panel-1), var(--panel-0));
border: 1px solid #0c1116; border-left: 3px solid var(--bronze-d);
border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
box-shadow: inset 0 1px 0 var(--edge-hi), 0 4px 12px rgba(0,0,0,.35);
}
.card.resource { border-left-color: var(--good); }
.card.infra { border-left-color: var(--brass); }
/* Solo la striscetta del bordo sinistro colorata per risorsa (sfondo card invariato):
Legname = bruno scuro, Vapore = azzurro, Ottone = ocra. Wayfinding discreto. */
.card.res-legname { border-left-color: #8a5a30; }
.card.res-vapore { border-left-color: #6fb2d8; }
.card.res-ottone { border-left-color: #c99a3e; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-head h3 { margin: 0; font-size: 14px; flex: 1; min-width: 0; font-weight: 700; letter-spacing: .2px; }
/* Icon medallion — beveled brass ring; drop a 42x42 in later for real art. */
.icon-slot {
flex: none; width: 44px; height: 44px; border-radius: 50%;
background:
radial-gradient(120% 120% at 30% 20%, var(--panel-2), var(--sky-0)),
conic-gradient(from 210deg, var(--bronze-d), var(--brass-l), var(--bronze-d));
background-clip: content-box, border-box; padding: 2px;
border: 1px solid var(--brass-d); display: grid; place-items: center; position: relative;
font-size: 22px; line-height: 1; overflow: hidden;
box-shadow: inset 0 1px 2px rgba(255,235,190,.25), 0 2px 5px rgba(0,0,0,.45);
}
.icon-slot img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; border-radius: 50%; }
/* Brown-centred variant: matches the .gi-coin medallions (#241a0e) instead of the default
slate/blue disc — for gold-framed yellow icons (Esercito Condiviso, Tesoro di Gilda). */
.icon-slot.is-brown { background:
radial-gradient(120% 120% at 30% 20%, #3a2a12, #170f05),
conic-gradient(from 210deg, var(--bronze-d), var(--brass-l), var(--bronze-d));
background-clip: content-box, border-box; }
/* Spedizioni condivise: rarità dal livello di difficoltà. La prima (comune) resta MARRONE come
il resto; le altre virano il medaglione + il velo della cornice della card (verde→blu→viola→
arancio→rosso) per leggere la difficoltà a colpo d'occhio. Solo tinta, niente glow. */
.icon-slot.gexp-rar-0 { background: radial-gradient(120% 120% at 30% 20%, #3a2a12, #170f05), conic-gradient(from 210deg, var(--bronze-d), var(--brass-l), var(--bronze-d)); background-clip: content-box, border-box; }
.icon-slot.gexp-rar-1 { background: radial-gradient(120% 120% at 30% 20%, #123a2a, #06170f), conic-gradient(from 210deg, #2e6a52, #7fd4b3, #2e6a52); background-clip: content-box, border-box; border-color: #2e6a52; }
.icon-slot.gexp-rar-2 { background: radial-gradient(120% 120% at 30% 20%, #123048, #06121c), conic-gradient(from 210deg, #2f5f80, #86c4ec, #2f5f80); background-clip: content-box, border-box; border-color: #2f5f80; }
.icon-slot.gexp-rar-3 { background: radial-gradient(120% 120% at 30% 20%, #2a1c48, #120a24), conic-gradient(from 210deg, #5a4a9a, #b7a2ff, #5a4a9a); background-clip: content-box, border-box; border-color: #5a4a9a; }
.icon-slot.gexp-rar-4 { background: radial-gradient(120% 120% at 30% 20%, #4a2c10, #1c1005), conic-gradient(from 210deg, #a6621f, #f0b46c, #a6621f); background-clip: content-box, border-box; border-color: #a6621f; }
.icon-slot.gexp-rar-5 { background: radial-gradient(120% 120% at 30% 20%, #481414, #1c0707), conic-gradient(from 210deg, #a63a2f, #f08a7c, #a63a2f); background-clip: content-box, border-box; border-color: #a63a2f; }
.gexp-card { --gexp-c: var(--bronze); position: relative; overflow: hidden; }
/* IL POSTO DOVE SI VA, sotto la card — stessa grammatica della Grande Ricerca: immagine sotto,
velatura scura sopra, contenuto al terzo piano. Sei difficolta', sei illustrazioni: prima
erano sei card identiche distinte solo dal nome, e «Razzia del Baratro» e «Convoglio delle
Nubi» si sceglievano leggendo, non guardando.
La velatura non e' decorazione: sotto ci sono i capitani iscritti, la potenza combinata e la
percentuale di riuscita — numeri, e su un fondo dipinto i numeri non si leggono. Verticale e
piu' fitta scendendo, perche' e' scendendo che il testo si accumula. */
.gexp-card .gexp-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
object-fit: cover; object-position: center 42%; }
.gexp-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(9,13,18,.46) 0%, rgba(9,13,18,.80) 42%, rgba(9,13,18,.92) 100%); }
.gexp-card > *:not(.gexp-bg) { position: relative; z-index: 2; }
.gexp-card.gexp-rar-1 { --gexp-c: #7fd4b3; } .gexp-card.gexp-rar-2 { --gexp-c: #86c4ec; }
.gexp-card.gexp-rar-3 { --gexp-c: #b7a2ff; } .gexp-card.gexp-rar-4 { --gexp-c: #f0b46c; } .gexp-card.gexp-rar-5 { --gexp-c: #f08a7c; }
.gexp-card .gexp-head { cursor: pointer; }
.gexp-card .gexp-arrow { margin-left: auto; color: var(--gexp-c); font-size: 12px; opacity: .85; }
.gexp-card .gexp-head .chat-x { margin-left: 8px; }
/* Compositore INLINE sotto la card condivisa (tipo Attacco/Spedizioni): tag isola in cima
SCORRIBILI in orizzontale (overflow nascosto → la pagina non si sposta), lista navi sotto. */
/* «Ripartizione equa» / «Per peso stiva» sono due meta' di UNA scelta, non due azioni diverse:
quindi mezzo e mezzo, non ognuna larga quanto la sua etichetta. Le parole hanno lunghezze
diverse e a larghezza libera uscivano due tasti scompagnati — e due tasti di misura diversa
si leggono come «questo conta piu' di quello», che qui non e' vero. */
.gexp-split .btn { flex: 1 1 0; min-width: 0; }
.gexp-composer { margin-top: 10px; border-top: 1px solid var(--bronze-d); padding-top: 10px; }
/* Tag isola: SEMPRE su UNA riga (mai a capo) → scorrimento laterale, overflow nascosto. Sovrascrive
il flex-wrap:wrap di .mkt-island-sel. */
.gexp-isles { display: flex; flex-wrap: nowrap !important; align-items: center; gap: 6px;
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
touch-action: pan-x; scrollbar-width: none; margin: 0 -2px 8px; padding: 0 2px 2px; }
.gexp-isles::-webkit-scrollbar { display: none; }
.gexp-isles .isl-chip { flex: none; white-space: nowrap; }
/* Righe navi COMPATTE e di altezza UGUALE: niente wrap (lo stepper NON va a capo toccando titolo/
giacenza), controlli piccoli, tasto Max QUADRATO. Su qualsiasi larghezza il rigo resta una riga. */
/* Niente `width: 100%` qui. La riga base porta un margine negativo (`margin: 0 -6px`) che le fa
sbordare lo sfondo fino al bordo della card — e' cosi' in Spedizioni e in Attacco. Sommandoci
una larghezza del 100% del contenitore, la riga partiva 6px piu' a sinistra restando larga
quanto prima: risultato, 7px di margine a sinistra e 19 a destra. Asimmetrica, e si vedeva.
Senza, la larghezza la decide il flusso e torna 7/7 come nelle altre due schermate. */
.gexp-composer .picker-ship { box-sizing: border-box; flex-wrap: nowrap !important; gap: 6px; align-items: center; padding: 6px 8px; }
.gexp-composer .picker-ship .ps-info { flex: 1 1 auto; min-width: 0; }
.gexp-composer .picker-ship .ps-head { min-width: 0; }
.gexp-composer .picker-ship .ps-head b, .gexp-composer .picker-ship .ps-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; }
.gexp-composer .picker-ship .art-sm { --art: 40px; }
.gexp-composer .picker-ship .meta-stats { font-size: 10px; gap: 1px 10px !important; }
.gexp-composer .stepper { flex: none !important; gap: 2px; margin: 0 !important; }
.gexp-composer .stepper .btn { min-width: 22px; min-height: var(--btn-h-micro); width: 22px; padding: 0; font-size: 13px; }
.gexp-composer .stepper input { width: 30px; min-height: 24px; padding: 0 2px; }
/* Il moltiplicatore di passo (×1 → ×10 → ×100 → MAX): stesso tasto delle spedizioni singole.
Qui deve stare piu' stretto perche' il compositore inline ha meno larghezza, ma l'etichetta
«MAX» e' la piu' lunga e non deve andare a capo. */
/* Il moltiplicatore di passo cambia ETICHETTA a ogni tocco (×1 → ×10 → ×100 → MAX), e le quattro
non sono larghe uguale. Con una larghezza `auto` il tasto si allargava su «×100» e su «MAX», e
tutta la pulsantiera − 0 + slittava di lato sotto il dito: si mira a un tasto e se ne preme un
altro. La larghezza qui NON si dichiara apposta — la eredita da `.picker-ship .step-mag`, che
e' fissa a 36px per tutti e tre i selettori navi. Restano solo altezza e corpo, che nel
compositore inline sono davvero piu' stretti. */
/* Nel compositore inline cambia solo l'ALTEZZA (le righe sono piu' strette). Larghezza, corpo e
padding vengono dalla regola condivisa `.picker-ship .stepper .step-mag`, cosi' il tasto e'
identico nei tre selettori navi e si ritara in un posto solo. */
.gexp-composer .stepper .step-mag { height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.gexp-hint { font-size: 11px; line-height: 1.35; margin: 0 0 8px; color: var(--patina); }
.gexp-hint .gi { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
/* Fallback NASCOSTO di default: compare solo se l'immagine manca davvero (onerror →
.noart). Prima era visibile "sotto" l'art e lampeggiava a ogni re-render. */
.icon-slot .is-fallback { display: grid; place-items: center; visibility: hidden; }
.icon-slot.noart .is-fallback { visibility: visible; }
/* Art tile — framed illustration plate (ships now; buildings/tech later).
Bigger than .icon-slot to give the artwork presence, with an emoji fallback
layered underneath so a missing image degrades gracefully. */
.art-tile {
position: relative; flex: none; width: var(--art, 87px); height: var(--art, 87px);
border-radius: 12px; overflow: hidden; /* no element border → the art fills edge-to-edge */
background: radial-gradient(130% 130% at 30% 18%, var(--panel-2), var(--sky-0));
box-shadow: inset 0 1px 0 rgba(255,235,190,.22), 0 3px 9px rgba(0,0,0,.45);
}
.art-tile .art-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); visibility: hidden; }
.art-tile.noart .art-fallback { visibility: visible; } /* solo quando l'art manca davvero */
.art-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art-tile::after { /* brass frame + glossy sheen — drawn ON TOP of the art (image fills the whole tile) */
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background: linear-gradient(180deg, rgba(255,245,225,.10), transparent 44%, rgba(0,0,0,.16));
box-shadow: inset 0 0 0 1px var(--brass-d), inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 7px rgba(0,0,0,.12);
}
.card.locked .art-tile { filter: grayscale(.5); }
.art-tile.art-sm { --art: 46px; border-radius: 8px; }
.art-tile.art-sm .art-fallback { font-size: 18px; }
.lvl { color: var(--amber-l); font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; /* glow rimosso */ }
.card-body { margin-top: 6px; font-size: 13px; color: var(--ink-dim); }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; align-items: center; }
.cost { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cost.lack { color: var(--rust); }
/* Cost group used inline within a text line (banners, dialogs): keeps the individual
.cost chips evenly spaced and vertically aligned with the surrounding label instead
of jamming together with no gap. */
.cost-inline { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; vertical-align: middle; }
/* Costo×quantità nelle card navi/difese (stepper): stesso problema di .cost-inline —
senza flex+gap i .cost interni si appiccicano ("57 114 209" tutto attaccato) e il
timer della .row finisce disallineato. */
.cost-qty-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; vertical-align: middle; }
/* «×3» davanti al costo: la riga mostra il totale del LOTTO accanto a un tempo che è per unità,
e senza questa targhetta il totale si leggeva come un rincaro del prezzo unitario. */
.qty-mult { font-weight: 700; color: var(--amber-l); }
.card-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.card-actions .btn { flex: 1; }
/* Compact upgrade button: doesn't stretch full-width (level-up CTAs). */
.card-actions .btn-compact { flex: 0 1 auto; align-self: flex-start; }
/* Compact "Lv up" square: black rounded up-arrow + tiny label, right-aligned beside cost/time
(replaces the wide "Passa al livello" — frees horizontal space so cards stay tight). */
.lvlup-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cost-grp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.btn-lvlup {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 17px; padding: 0; border-radius: 999px; cursor: pointer;
background: linear-gradient(180deg, var(--brass-l), var(--bronze) 55%, var(--bronze-d));
border: 1px solid var(--brass-d); box-shadow: inset 0 1px 0 rgba(255,235,190,.4), 0 2px 5px rgba(0,0,0,.4);
}
.btn-lvlup svg { width: 13px; height: 13px; display: block; }
.btn-lvlup svg path { fill: #0d0a02; stroke: #0d0a02; }
/* Disabled = fully opaque dull-grey pill (not translucent): with .btn-lvlup absolutely
positioned over the tech-tree connector line, an opacity fade let the line bleed
through the button. A solid muted background reads as "off" without the see-through. */
.btn-lvlup:disabled { opacity: 1; cursor: default; box-shadow: none;
background: linear-gradient(180deg, #6b6a62, #4a4943 55%, #3a3933); border-color: #57554c; }
.btn-lvlup:disabled svg path { fill: #8b8880; stroke: #8b8880; }
.btn-lvlup:not(:disabled):active { filter: brightness(.9); }
/* Mounted in the tech-tree tile column: sits centred under the level pip. */
.tnode-tile .btn-lvlup { position: absolute; top: calc(100% + 15px); left: 4px; right: 4px; width: auto; z-index: 2; }
/* Short cards (e.g. Castoneria): reserve room for the mounted button so it never
spills under the next node. tile 68 + gap 15 + button 17 + padding ≈ */
.tnode:has(.tnode-tile .btn-lvlup) { min-height: 120px; }
/* IL RIPENSAMENTO: per un minuto dall'ordine la pillola d'ottone porta ANNULLA al posto della
freccia. Stessa pillola, stesso posto, stessa altezza — cambia solo il contenuto, così il
dito lo ritrova dov'era. La freccia non viene rimossa dal DOM ma spenta (.is-off): allo
scadere del minuto torna al suo posto senza ricostruire la pagina. */
.btn-lvlup.is-off { display: none; }
/* NIENTE maiuscolo: la pillola è larga 60px fissi (la incornicia il medaglione sopra) e le parole
lunghe delle altre lingue — «Abbrechen», «Annuleren» — in maiuscolo ci sbattono contro. */
.btn-undo {
font-size: var(--fs-xs); font-weight: 700; line-height: 1; color: #0d0a02;
padding: 0 2px; overflow: hidden;
}
.btn-undo:not(:disabled):active { filter: brightness(.9); }
/* collapsed locked tech node: just the head (icon + name + level), tap to expand */
.lock-min { cursor: pointer; }
.lock-min .card-head { margin-bottom: 0; cursor: pointer; }
.lock-min .card-body { display: none; }
/* Il primo requisito mancante SULLA CARD CHIUSA: una riga sotto il nome, non un elenco. Serve
la direzione, non l'inventario — l'elenco completo resta dentro, aprendola. La pastiglia e'
la stessa dell'elenco (`.reqchip`), quindi porta anche al nodo che manca: e' insieme il
motivo e la strada. Nessuna misura nuova: solo i passi della scala. */
.lock-why { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
margin-top: var(--sp-6); }
.lock-why .subtle { font-size: var(--fs-sm); }
/* small inline energy saetta inside the upgrade-confirm popup lines */
.cf-line > span:first-child { display: inline-flex; align-items: center; gap: 4px; } /* keeps the saetta vertically centred with "Consumo" */
.cf-line .ricon { width: 13px; height: 13px; margin: 0; }
/* progress: glowing energy conduit */
.progress { height: 7px; border-radius: 4px; background: var(--sky-0); overflow: hidden; margin-top: 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.progress > i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--bronze), var(--amber) 70%, var(--amber-l)); /* glow rimosso */ }
.timer { font-variant-numeric: tabular-nums; color: var(--ink); }
/* stepper */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input { width: 56px; min-height: 36px; text-align: center; background: var(--sky-0); color: var(--ink); border: 1px solid #0b0f13; border-radius: var(--r-sm); font-size: 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.stepper .btn { min-width: 36px; flex: none; }
/* Step-magnitude toggle: cycles the +/- increment ×1→×10→×100 (big fleets/cargo). FIXED width
so "×1" and "×100" occupy the same box — no jitter as the label changes while navigating. */
.stepper .step-mag { width: 40px; min-width: 40px; flex: none; box-sizing: border-box;
padding-left: 2px; padding-right: 2px; font-size: 11px; line-height: 1; white-space: nowrap;
display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
font-variant-numeric: tabular-nums; color: var(--amber-l); border-color: var(--bronze-d); }
/* Variante compatta (Flotta/Difese): stessi tasti dell'attacco, occupano meno spazio orizzontale. */
.stepper-sm { gap: 2px; }
.stepper-sm .btn { min-width: 24px; min-height: var(--btn-h-xs); padding: 0 4px; font-size: 13px; }
.stepper-sm input { width: 34px; min-height: 28px; padding: 0 2px; font-size: 13px; border-radius: var(--r-sm); }
.stepper-sm .step-mag { width: 36px; min-width: 36px; font-size: 10px; }
/* Notification prefs (settings): brass toggle switches + per-row hints */
.ntoggle {
flex: none; position: relative; width: 42px; height: 24px; padding: 0; cursor: pointer;
border-radius: 999px; border: 1px solid var(--bronze-d);
background: linear-gradient(180deg, #10181f, #1a252e);
box-shadow: inset 0 2px 4px rgba(0,0,0,.55); transition: background .18s ease;
}
.ntoggle i {
position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: linear-gradient(180deg, #8d9aa5, #5c6a76); transition: left .18s ease, background .18s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.ntoggle.on { background: linear-gradient(180deg, var(--bronze-d), var(--bronze)); border-color: var(--brass-d); }
.ntoggle.on i { left: 20px; background: linear-gradient(180deg, var(--amber-l), var(--amber)); }
.ntoggle:disabled { opacity: .4; cursor: default; }
.np-hint { display: block; font-size: 10px; margin-top: 1px; }
.np-row.np-dim { opacity: .45; }
/* Notifiche push: header (master) fisso, lista tipi scorribile con margini stabili */
.np-head { padding-bottom: 10px; border-bottom: 1px solid var(--brass-d); }
.np-list { max-height: 46vh; overflow-y: auto; margin-top: 8px; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.np-list .np-row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.np-list .np-row:last-child { border-bottom: none; }
.np-lbl { font-size: 13px; }
.np-group {
margin: 12px 0 2px; padding: 4px 0;
font-family: "Cinzel", serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
color: var(--amber-l);
}
.np-group:first-child { margin-top: 0; }
/* Aiuto (in-game manual) + Segnala (alfa feedback) in settings */
.help-topic { border-bottom: 1px solid rgba(255,255,255,.06); padding: 4px 0; }
.help-topic:last-child { border-bottom: none; }
.help-topic summary { cursor: pointer; font-size: 13px; color: var(--amber-l); list-style: none; }
.help-topic summary::before { content: "▸ "; color: var(--bronze); }
.help-topic[open] summary::before { content: "▾ "; }
.help-topic p { font-size: 12px; line-height: 1.45; }
.fb-text {
width: 100%; margin-top: 8px; padding: 8px 10px; resize: vertical; min-height: 64px;
border-radius: 8px; border: 1px solid var(--bronze-d); color: var(--ink);
background: linear-gradient(180deg, #10181f, #1a252e); box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
font: inherit; font-size: 13px;
}
.fb-text:focus { outline: none; border-color: var(--brass-d); }
.alfa-note { color: var(--amber-l); opacity: .85; font-size: 11px; }
/* chips (engraved tags) */
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--bronze-d); color: var(--ink-dim); background: rgba(0,0,0,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.chip.scout{color:#9fc0cb} .chip.cargo{color:#d8b06a} .chip.fighter{color:#e09877}
.chip.frigate{color:#c8bd77} .chip.cruiser{color:#d6897a} .chip.tank{color:#97aed3} .chip.capital{color:var(--amber-l)}
/* un numero che e' salito grazie ai bonus (potenza effettiva sopra quella di listino) */
.chip.good{color:var(--good)}
/* «regolatore N%» sulla card di una miniera: dice PERCHE' il numero e' basso e porta alla manopola.
E' un bottone, quindi eredita font e cursore; ambrato perche' e' un avviso, non un errore. */
/* La pastiglia del regolatore vive in fondo alla riga dei costi, spinta a destra dallo
`space-between` della riga. `flex:none` perche' non deve MAI stringersi: se cede lei, cede
sul numero — «regolatore 9…%» e' peggio di non scriverlo. A cedere, semmai, e' il gruppo dei
materiali, che ha `min-width:0` e sa andare a capo. */
.chip-thr{color:var(--amber-l);cursor:pointer;font-family:inherit;line-height:inherit;flex:none}
.chip-thr:active{filter:brightness(.9)}
.chip.titan{color:#f0c869; border-color:var(--brass); background:linear-gradient(180deg,rgba(120,84,26,.35),rgba(0,0,0,.3)); /* glow rimosso */ letter-spacing:.4px}
.chip.leviathan{color:#8fe6d0; border-color:#3f7f74; background:linear-gradient(180deg,rgba(20,90,80,.42),rgba(0,0,0,.35)); /* glow rimosso */ letter-spacing:.5px}
/* Engine-power slider — one compact row, minimal height */
.pw-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px}
.pw-row .pw-lbl{color:var(--amber-l);white-space:nowrap;letter-spacing:.3px}
/* % value: FIXED width + tabular figures so the slider never shifts as 80→90→100 changes width. */
.pw-row .pw-pct{flex:none;width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
/* hint on its OWN line below → radical text changes (durata/vapore) never reflow the slider row. */
.pw-hint{margin-top:2px;text-align:right;font-size:11px;white-space:nowrap;min-height:14px}
.pw-slider{flex:1;min-width:80px;height:16px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.pw-slider::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#6b4a1c,var(--brass))}
.pw-slider::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#6b4a1c,var(--brass))}
.pw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-4px;border-radius:50%;background:var(--amber-l);border:1px solid #2a1c08}
.pw-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--amber-l);border:1px solid #2a1c08}
.card.locked { opacity: .68; border-left-color: var(--slate-3); filter: grayscale(.25); }
.locked-note { flex: 1; font-size: 13px; color: var(--ink-dim); padding: 6px 0; }
.locked-note b { color: var(--brass-l); }
.rar-comune{color:var(--ink-dim)} .rar-raro{color:#6fc0aa} .rar-epico{color:#a98fe0} .rar-leggendario{color:var(--amber-l)} .rar-mitico{color:#e7627a}
/* Fleet composer row: ship art tile + name/stats + stepper with a Max shortcut.
Selected rows glow amber so the composed fleet reads at a glance. */
.picker-ship { display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 6px 6px; margin: 0 -6px; border-radius: 8px; }
/* Niente riga tratteggiata fra una nave e l'altra. Le separa gia' tutto il resto — la tessera
dell'arte, il salto di riga, la spaziatura — e il tratteggio aggiungeva rumore a una lista
che di righe ne ha dieci. Vale per TUTTI i selettori navi: Spedizioni, Attacco, condivise. */
.picker-ship:last-of-type { border-bottom: none; }
.picker-ship .ps-info { flex: 1 1 auto; min-width: 58px; display: flex; flex-direction: column; gap: 2px; }
/* Riga 1: nome a sinistra, GIACENZA (×N) a destra. Riga 2: solo le statistiche.
Il nome può andare a capo (niente "F..." troncato): la giacenza resta pinnata in alto a destra. */
.picker-ship .ps-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; }
/* Nome nave: non cresce (flex 0), così la giacenza ×N gli sta SUBITO a destra invece che spinta a fondo riga. */
.picker-ship .ps-head b { font-size: 13px; flex: 0 1 auto; min-width: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-ship .ps-own { margin-top: 0; }
.picker-ship .meta { font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums;
display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
/* Ogni coppia icona+valore resta UNITA anche andando a capo (niente simbolo staccato dal numero). */
.picker-ship .meta .stat { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
/* Ships-available count reads at a glance: bright amber, bold. */
.picker-ship .ps-own { flex: none; color: var(--amber-l); font-weight: 700; }
.picker-ship .ps-own small { color: var(--ink-dim); font-weight: 400; font-size: 10px; }
.picker-ship.sel { background: linear-gradient(90deg, rgba(233,181,74,.10), transparent 72%); }
.picker-ship.sel .art-tile { box-shadow: 0 0 0 1px var(--amber); }
/* Stepper compatto e meno invasivo (− valore + ×N Max): tasti piccoli, altezza contenuta. */
.picker-ship .stepper { gap: 2px; flex: none; }
.picker-ship .stepper .btn { min-width: 23px; min-height: var(--btn-h-xs); padding: 0 4px; font-size: 12px; }
.picker-ship .stepper input { width: 30px; min-height: 27px; padding: 0 2px; font-size: 12px; }
/* Il moltiplicatore di passo, in TUTTI e tre i selettori navi (Spedizioni, Attacco, condivise).
`.picker-ship .stepper .btn` qui sopra ha la stessa specificita' e viene dopo, quindi vinceva
lei: il corpo restava a 12px e il padding a 4, e «×100» chiedeva 33px di testo piu' 8 di
padding dentro una scatola da 36 — sbordava, e non solo nel compositore di gilda.
Un selettore in piu' (`.stepper`) la mette davanti, e le misure tornano a essere quelle
pensate per questo tasto. La larghezza e' FISSA di proposito: l'etichetta cambia a ogni tocco
(×1 → ×10 → ×100 → MAX) e se il tasto si allarga trascina con se' tutta la pulsantiera − 0 +,
cioe' si mira a un tasto e se ne preme un altro. */
.picker-ship .stepper .step-mag { width: 36px; min-width: 36px; font-size: 10px; padding: 0; letter-spacing: -.2px; }
.picker-ship .ps-max { font-size: 10px; padding: 0 4px; }
.ps-max { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--brass-l); }
/* Telefoni stretti: lo stepper (−/valore/+/×N/Max) va a CAPO su una seconda riga allineata a
destra, così su riga 1 nome+giacenza e stat hanno tutta la larghezza (niente nomi troncati né
layout schiacciato dietro i tasti). L'art e le info restano in alto, i controlli sotto. */
@media (max-width: 430px) {
.picker-ship { flex-wrap: wrap; align-items: center; }
.picker-ship .ps-info { flex: 1 1 auto; min-width: 0; }
.picker-ship .ps-head b { font-size: 13px; }
.picker-ship .stepper { margin-left: auto; margin-top: 8px; }
}
/* Narrativa del rapporto: italico pulito, SENZA rail colorato a sinistra (era "slop"). */
.report { font-style: italic; color: var(--ink); }
.badge-ok { color: var(--good); font-weight:700; } .badge-fail { color: var(--rust); font-weight:700; }
/* --- Riepilogo scontro (rework grafico) --- */
.rep-battle { overflow: hidden; padding: 0; }
.rep-battle .card-body { padding: 12px 12px 12px; }
.rep-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
border-bottom: 1px solid var(--bronze-d); font-family: var(--font-display); }
.rep-banner .rep-role { display: flex; align-items: center; gap: 4px; font-size: 12px; letter-spacing: .5px; color: var(--brass-l); text-transform: uppercase; }
.rep-banner .rep-role .gi { width: 16px; height: 16px; }
.rep-verdict { margin-left: auto; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.rep-flag { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
padding: 2px 6px; border-radius: 4px; border: 1px solid var(--bronze-d); background: rgba(9,13,18,.5); color: var(--amber-l); }
.rep-b-win { background: linear-gradient(90deg, rgba(74,168,110,.22), transparent); }
.rep-b-win .rep-verdict { color: var(--good); }
.rep-b-loss { background: linear-gradient(90deg, rgba(196,74,58,.22), transparent); }
.rep-b-loss .rep-verdict { color: var(--rust); }
.rep-b-draw { background: linear-gradient(90deg, rgba(160,160,170,.16), transparent); }
.rep-b-draw .rep-verdict { color: var(--patina); }
/* Rapporto EVENTO (boss mondiale): tema viola (il plasma del colosso), diverso dal PvP. */
.rep-b-event { background: linear-gradient(90deg, rgba(158,101,214,.28), transparent); }
.rep-b-event .rep-verdict { color: #c79bf0; }
.rep-b-event .rep-role { color: #b892e6; }
.rep-event { border-color: rgba(158,101,214,.45);
background: linear-gradient(180deg, rgba(158,101,214,.06), transparent 120px); }
.bf-boss { font-size: 12px; color: #cbb2ea; display: flex; align-items: center; gap: 6px;
padding: 12px 10px; opacity: .95; border-radius: 8px;
background: rgba(158,101,214,.1); border: 1px solid rgba(158,101,214,.28); }
.bf-boss .gi { width: 15px; height: 15px; }
/* Ritratto del colosso al posto dell'avatar nemico. */
.bf-boss-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bf-boss-av { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; display: flex;
align-items: center; justify-content: center; font-size: 30px;
background: radial-gradient(circle at 50% 35%, rgba(158,101,214,.35), rgba(20,14,30,.9));
border: 1px solid rgba(158,101,214,.5); }
.bf-boss-av .av-img { width: 100%; height: 100%; object-fit: cover; }
.bf-boss-av.dead { filter: grayscale(.6) brightness(.72); box-shadow: none;
border-color: rgba(158,101,214,.3); }
.bf-boss-name { font-family: var(--font-display); font-size: 12px; color: #cbb2ea;
letter-spacing: .4px; text-align: center; }
.rep-vs { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rep-vs b { color: var(--ink); }
/* «Lo scontro e' finito, le navi tornano»: il rapporto esce all'istante dello scontro, ma il
bottino entra nella stiva all'atterraggio. Senza questa riga uno legge il bottino, va a
cercarlo e non lo trova — e pensa a un furto. */
.rep-inflight { font-size: 11px; margin: var(--sp-6) 0 0; display: flex; align-items: center;
gap: var(--sp-6); color: var(--amber-l); }
/* IL RITRATTO DELLA PREDA e tutto il resto alla sua destra: nome, tier, avviso di volo e le
pillole di danno/perdite stanno in colonna accanto alla bestia, non sopra e sotto.
`align-items: flex-start` e non `center`: la colonna di testo cresce di una riga quando la
flotta sta ancora rientrando, e centrata faceva ballare il ritratto su e giu' fra una scheda
e l'altra. La tessera e' quella della Chiamata alla caccia — stessa creatura, stessa faccia. */
.rep-preda { display: flex; align-items: flex-start; gap: var(--sp-10); }
.rep-preda-art { width: 56px; height: 56px; }
.rep-preda-art.noart { display: none; } /* arte mancante: via la tessera, non un riquadro vuoto */
.rep-preda-testo { flex: 1; min-width: 0; }
.rep-preda-chip { margin: var(--sp-6) 0 0; }
.rep-story { font-style: italic; color: var(--ink); line-height: 1.45; margin: 6px 0 10px; font-size: 12px;
border-left: 2px solid var(--brass); padding-left: 10px; }
.rep-story b { font-style: normal; color: var(--brass-l); }
.bf-grid { display: flex; flex-direction: column; gap: 6px; }
.bf-side { background: #0c1219; border: 1px solid var(--bronze-d); border-radius: 8px; padding: 8px 8px; }
/* Tu vs nemico: cornice tinta su TUTTI i lati + velo di sfondo appena percettibile
(niente rail colorato su un solo lato — il bordo avatar + la didascalia bastano). */
.bf-mine { border-color: rgba(202,162,74,.6); background: linear-gradient(180deg, rgba(233,181,74,.16), #0c1219 58%); }
.bf-enemy { border-color: rgba(176,79,74,.6); background: linear-gradient(180deg, rgba(190,90,74,.18), #0c1219 58%); }
.bf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bf-av.av-slot { width: 46px; height: 46px; } /* batte .av-slot (40px), stessa specificità ma definita dopo */
.bf-av { width: 46px; height: 46px; border-radius: 8px; flex: none; overflow: hidden;
border: 1px solid var(--bronze-d); box-shadow: inset 0 1px 0 var(--edge-hi); }
.bf-mine .bf-av { border-color: var(--brass); }
.bf-enemy .bf-av { border-color: var(--rust); cursor: pointer; }
.bf-av .av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bf-who > b { font-size: 13px; color: var(--ink); font-family: var(--font-display); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-guild { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--brass-l); cursor: pointer; width: fit-content; }
.bf-guild .crest-ic, .bf-guild .gi { width: 15px; height: 15px; }
.bf-gtag { color: var(--patina); font-weight: 700; }
.bf-head .bf-pow { margin-left: auto; font-family: var(--font-display); font-size: 13px; color: var(--ink); letter-spacing: .5px; flex: none; }
.bf-head .bf-pow::before { content: "⚔ "; color: var(--patina); }
.bf-cap { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--patina); margin: 0 0 6px 2px; }
/* Griglia a 5 COLONNE fisse: le tessere si adattano alla larghezza (più grandi che a 6/fila) e
sono sempre 5 per riga in qualunque contenitore — niente wrap che a volte ne infila 6. */
.bf-units { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
/* Desktop: 6 tessere per riga (su schermo grande 5 risultavano troppo grandi). Mobile e tablet
restano a 5 — breakpoint sopra il tablet landscape. */
@media (min-width: 1100px) { .bf-units { grid-template-columns: repeat(6, 1fr); } }
/* Desktop (≥900px): tessere ~20% più piccole OVUNQUE sulla classe (ordine 08/08/2026) —
non un numero fisso di colonne ma celle a riempimento da ~86px: nel pannello Storico
(griglia 572px) entrano 6 tessere da ~92px dove prima erano 5 da ~110. Vince sulla
regola 1100px sopra perché viene dopo a pari specificità. */
@media (min-width: 900px) {
.bf-units, #views .bf-units { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
}
.bf-empty { grid-column: 1 / -1; font-size: 11px; color: var(--muted); font-style: italic; }
.bf-unit { position: relative; min-width: 0; }
/* Arte quadrata responsive: riempie la cella della griglia, la healthbar si ancora al suo fondo. */
.bf-art { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.bf-unit .art-xs { width: 100%; height: 100%; border-radius: 8px; }
.art-xs { width: 46px; height: 46px; border-radius: 8px; }
/* Numero unità SPOSTATO nell'angolo alto-destra (prima copriva il bordo basso, dove ora vive la
healthbar): pillola flottante come il badge perdite, ma a destra. */
.bf-unit .bf-ct { position: absolute; top: -5px; right: -4px; bottom: auto; font-size: 10px; font-weight: 700; color: var(--ink);
background: rgba(9,13,18,.92); border: 1px solid var(--bronze-d); border-radius: 4px; padding: 0 4px; line-height: 15px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Perdite: micro-badge bianco-su-rosso in alto a DESTRA, SOVRAPPOSTO al numero totale (ne copre il
bordo basso, tipo pallino notifica) → resta leggibile il totale sotto, l'arte resta libera. */
.bf-unit .bf-lost { position: absolute; top: 7px; right: -3px; font-size: 7px; font-weight: 700; color: #fff;
background: var(--rust); border: 1px solid rgba(0,0,0,.4); border-radius: 4px; padding: 0 2px; line-height: 11px; box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bf-unit.hit .art-tile { box-shadow: inset 0 0 0 1px rgba(196,74,58,.6); }
.bf-unit.wiped .art-tile { filter: grayscale(1) brightness(.5); }
/* Healthbar SOTTILISSIMA sul bordo basso dell'arte (~4px → copre quasi nulla): traccia scura +
fill colorato per fascia. Dentro .bf-art → ancorata al fondo dell'ARTE, non della tessera.
La % esatta vive nel tooltip (title), non a schermo, così la navicella resta visibile. */
.bf-hp { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 4px; border-radius: 4px;
background: rgba(6,9,13,.7); border: 1px solid rgba(0,0,0,.35); overflow: hidden;
box-shadow: inset 0 1px 1px rgba(0,0,0,.45); }
.bf-hp i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.bf-hp.hp-ok i { background: linear-gradient(90deg, #3f7d4e, #5aa568); }
.bf-hp.hp-mid i { background: linear-gradient(90deg, #9c7a2e, #caa24a); }
.bf-hp.hp-low i { background: linear-gradient(90deg, #7d3a30, #b0504a); }
/* Nome sotto la tessera: le immagini navi si somigliano, quindi va scritto. Ancorato alla
larghezza dell'immagine (58px) → mai overflow orizzontale; fino a 2 righe poi ellissi. */
.bf-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
overflow: hidden; width: 100%; margin-top: 2px; text-align: center; color: #fff;
font-size: 10px; line-height: 1.15; font-weight: 600; overflow-wrap: anywhere; }
.bf-power { height: 7px; border-radius: 4px; background: var(--rust); overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.bf-power .bf-power-mine { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-l)); border-radius: 4px; }
/* Tabellina round-per-round: navi residue di ciascun lato a ogni round. Testo, non grafici — si
legge COME è andata e se il vantaggio si RIBALTA (la cella in testa, .rt-lead, cambia lato). */
.rep-rounds { margin-top: 10px; border: 1px solid var(--bronze-d); border-radius: 8px;
background: #0c1219; overflow: hidden; }
.rt-title { padding: 8px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
color: var(--patina); font-weight: 700; }
.rt-title .gi { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.rt-title .rt-cap { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0;
font-weight: 400; font-style: italic; font-size: 10px; color: var(--muted); }
.rt { width: 100%; border-collapse: collapse; font-size: 12px; }
.rt th { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--patina);
font-weight: 600; padding: 6px 10px; text-align: right; background: rgba(0,0,0,.2); }
.rt th.rt-lbl { text-align: left; }
/* Forze di partenza tra parentesi nell'intestazione (al posto della vecchia riga «inizio»). */
.rt th .rt-h0 { font-weight: 400; opacity: .75; font-size: 10px; }
.rt td { padding: 4px 10px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.rt td.rt-lbl { text-align: left; color: var(--muted); font-size: 11px; }
.rt .rt-num td { border-top: 1px solid rgba(255,255,255,.05); }
.rt .rt-me { color: var(--brass-l); }
.rt .rt-en { color: var(--rust); }
/* Perdite di quel round, tra parentesi accanto al conteggio: più piccole e smorzate. */
.rt .rt-d { font-size: 10px; font-weight: 400; opacity: .68; }
/* Cella in testa quel round: più marcata → il ribaltamento salta all'occhio. */
.rt td.rt-lead { font-weight: 800; }
.rt td.rt-me.rt-lead { color: var(--brass-l); }
.rt td.rt-en.rt-lead { color: #d9756a; }
/* Riga-frase di interlinea: racconta lo scambio del round tra una riga-numeri e l'altra. Niente
rail colorato a lato (regola dei bordi-accento) — colore nel testo + freccetta d'esito. */
.rt .rt-say td { padding: 4px 10px 4px; text-align: left; font-size: 10px; font-style: italic;
color: var(--muted); background: rgba(0,0,0,.16); }
.rt .rt-say b { font-style: normal; font-weight: 700; }
.rt .rt-say .rt-mark { font-style: normal; font-weight: 800; margin-right: 6px; }
.rt .rt-say-win td { color: #b7c8a6; } .rt .rt-say-win .rt-mark { color: var(--good); }
.rt .rt-say-loss td { color: #d4aaa3; } .rt .rt-say-loss .rt-mark { color: var(--rust); }
.rt .rt-say-even .rt-mark { color: var(--patina); }
.rep-loot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 12px; }
.rep-loot-lbl { font-size: 11px; color: var(--patina); text-transform: uppercase; letter-spacing: .5px; }
/* LA VITA DELLA PREDA nel rapporto di caccia. Stessa grammatica della barra delle navi — pieno
a sinistra, colore che scende — ma alta e leggibile, perche' qui la barra E' il rapporto. Il
morso di QUESTA sortita e' il segmento ruggine attaccato al pieno: si vede a colpo d'occhio
quanto le hai tolto rispetto a quel che le restava. Niente glow: solo bordi e ombre interne. */
.boss-hp-wrap { margin: 6px 0 2px; }
.boss-hp-top, .boss-hp-foot { display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; font-size: 11px; }
.boss-hp-top b, .boss-hp-foot b { font-variant-numeric: tabular-nums; color: var(--ink); }
.boss-hp { display: flex; height: 8px; margin: 4px 0; border-radius: 4px; overflow: hidden;
background: rgba(6,9,13,.7); border: 1px solid rgba(0,0,0,.45);
box-shadow: inset 0 1px 2px rgba(0,0,0,.55); }
.boss-hp i { display: block; height: 100%; }
/* Il morso a RIGHE, non a tinta piatta: quando la preda e' gia' al lumicino il pieno e' rosso
anche lui, e due rossi accostati diventano una barra sola. La rigatura dice «questo pezzo
gliel'hai staccato tu» a qualunque livello di vita. */
.boss-hp .bh-hit { background: repeating-linear-gradient(135deg,
rgba(214,108,74,.95) 0 3px, rgba(120,40,26,.95) 3px 6px);
border-left: 1px solid rgba(0,0,0,.55); }
.boss-hp.bh-ok .bh-left { background: linear-gradient(90deg, #3f7d4e, #5aa568); }
.boss-hp.bh-mid .bh-left { background: linear-gradient(90deg, #9c7a2e, #caa24a); }
.boss-hp.bh-low .bh-left { background: linear-gradient(90deg, #7d3a30, #b0504a); }
.boss-hp-foot .bh-dmg { display: inline-flex; align-items: center; gap: 4px; color: var(--rust-l); }
.boss-hp-foot .bh-dmg .gi { width: 12px; height: 12px; }
/* Quel che e' caduto: caselle d'inventario, non chip di testo. */
.rep-drop { margin-top: 8px; }
/* Fuori dalla griglia dell'inventario le caselle non hanno una colonna che le dimensioni:
`aspect-ratio: 1` da solo le farebbe collassare sul contenuto. Larghezza esplicita. */
.rep-drop-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rep-drop-slots .inv-slot { width: 46px; flex: none; }
.rep-drop-hint { font-size: 10px; margin-top: 4px; }
/* Risorse/capitani nei rapporti condivisi: icona+numero (o nome) IN LINEA, senza pillole
(il muro di round-box era pesante). Separati da spaziatura, non da box. */
.rep-res { display: inline-flex; align-items: center; gap: 2px; margin-right: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rep-res .ricon { width: 14px; height: 14px; }
.rep-cap { color: var(--ink); white-space: nowrap; }
.rep-cap:not(:last-child)::after { content: "·"; color: var(--ink-dim); margin: 0 6px; }
.rep-cap .gi { width: 12px; height: 12px; }
/* ---- Tech tree (Costruzioni / Ricerche) ---- */
.tech-lane { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--patina); margin: 12px 2px 4px; }
.tech-lane:first-child { margin-top: 2px; }
.tech-tree { position: relative; }
/* LA FASCIA DI GRUPPO (16/08/2026): righe alterne «da tabella», ma la riga e' il GRUPPO —
etichetta + corsia — e la velatura sta sullo sfondo dell'espandibile, DIETRO le card, a tutta
larghezza (i -12px rientrano il padding di .acc-body-in). La fascia parte SOPRA l'etichetta del
gruppo e muore prima dell'etichetta successiva. Per ora accesa solo su DEPOSITI (.tt-fascia
assegnata in sectionCostruzioni). L'involucro .tt-gruppo e' trasparente: le due righe qui sotto
restituiscono all'etichetta i margini che aveva da figlia diretta del corpo. */
.tt-gruppo > .tech-lane { margin-top: 12px; }
.tt-gruppo:first-child > .tech-lane { margin-top: 2px; }
.tt-fascia { background: linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .1)); margin: 10px -12px 0; padding: 10px 12px 12px; }
.tt-fascia > .tech-lane { margin-top: 0; }
.tnode { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 8px 0; scroll-margin-top: 70px; }
/* SBARRATO dai lavori al Laboratorio: velo scuro su tutto il nodo + lucchetto d'ottone al centro.
Il velo intercetta i click (niente tap accidentali sulle card sotto); il lucchetto sta sopra e
spiega perché. Torna tutto normale appena il Laboratorio finisce. */
.tnode.lab-busy .tnode-art, .tnode.res-busy .tnode-art { filter: grayscale(.7) brightness(.38); }
.tnode-lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
border: 1px solid var(--brass-d); border-radius: 50%; background: rgba(12,18,26,.9);
color: var(--brass-l); padding: 0; transition: transform .12s, border-color .12s; }
.tnode-lock:hover { border-color: var(--brass-l); transform: translate(-50%, -50%) scale(1.08); }
.tnode-lock:active { transform: translate(-50%, -50%) scale(.95); }
.tnode-lock .gi { width: 16px; height: 16px; }
/* Connector spine — opt-in: only lanes that are a real dependency CHAIN draw it.
Same-tier siblings (parallel lanes) get no spine. (16/08/2026: confermato dal committente
«solo dove chains» — l'elenco delle corsie-catena sta in CHAIN_LANES, in app.js.) */
.tech-tree--chain .tnode::before {
content: ""; position: absolute; left: 38px; top: 0; bottom: 0; width: 2px;
background: rgba(135,106,62,.42); /* uniform connector — no mid-strip colour shift */
}
.tech-tree--chain .tnode:first-child::before { top: 32px; }
.tech-tree--chain .tnode:last-child::before { bottom: auto; height: 32px; }
/* Rounded medallion (image-ready): emoji now, drop /assets//.jpg later. */
.tnode-tile {
position: relative; width: 68px; height: 68px; z-index: 1; align-self: start; justify-self: center;
}
.tnode-art {
position: absolute; inset: 0; border-radius: 15px; overflow: hidden; border: 1px solid var(--brass-d);
background: radial-gradient(130% 130% at 32% 18%, var(--panel-2), var(--sky-0));
box-shadow: inset 0 1px 0 rgba(255,235,190,.22), 0 3px 9px rgba(0,0,0,.5);
}
.tnode-art::after { content: ""; position: absolute; inset: 0; border-radius: 15px; background: linear-gradient(180deg, rgba(255,245,225,.14), transparent 42%, rgba(0,0,0,.3)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.tnode-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tnode-lvl {
position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap;
padding: 0 8px; height: 19px; line-height: 18px; text-align: center;
border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .2px;
background: linear-gradient(180deg, var(--panel-2), var(--sky-0)); color: var(--amber-l);
border: 1px solid var(--brass-d); box-shadow: 0 2px 4px rgba(0,0,0,.55);
}
/* Castone incastonato: badge SOLO-icona nell'angolo alto-destra del medaglione, tinto per
rarità (nessun testo). Click → modale del castone (Disequipaggia). Più castoni si impilano. */
.tnode-gems { position: absolute; top: -7px; right: -7px; z-index: 4; display: flex; flex-direction: column; gap: 2px; }
/* Difese/altre card non-techNode: wrapper attorno all'art per ancorare il badge castone in alto a destra. */
.art-gem-wrap { position: relative; display: inline-block; flex: none; }
.gem-corner { width: 20px; height: 20px; padding: 0; display: grid; place-items: center; cursor: pointer;
border-radius: 4px; background: radial-gradient(120% 120% at 30% 20%, #20262f, #0b0e13);
border: 1px solid var(--bronze-d); box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.gem-corner .gi { width: 13px; height: 13px; }
.gem-corner.rar-comune { border-color: #9aa4b2; /* glow rimosso */ }
.gem-corner.rar-comune .gi { filter: grayscale(1) brightness(1.6); }
.gem-corner.rar-raro { border-color: #6fc0aa; /* glow rimosso */ }
.gem-corner.rar-raro .gi { filter: hue-rotate(115deg) saturate(1.4); }
.gem-corner.rar-epico { border-color: #a98fe0; /* glow rimosso */ }
.gem-corner.rar-epico .gi { filter: hue-rotate(220deg) saturate(1.5) brightness(1.15); }
.gem-corner.rar-leggendario { border-color: var(--amber-l); /* glow rimosso */ }
.gem-corner.rar-leggendario .gi { filter: brightness(1.15); }
.gem-corner.rar-mitico { border-color: #e7627a; }
.gem-corner.rar-mitico .gi { filter: hue-rotate(320deg) saturate(1.6) brightness(1.1); }
.gem-corner.unstable::after { content: ""; position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: #e0a63a; /* glow rimosso */ }
.gem-corner:active { transform: translateY(1px); }
.tnode.is-max .tnode-art { border-color: #7c571a; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 9px rgba(0,0,0,.5); }
.tnode.is-max .tnode-lvl { color: #2c1e06; background: linear-gradient(180deg, var(--amber-l), var(--amber)); border-color: #7c571a; }
/* In-production glow: slow, soft LED breathing — l'alone ambra al picco è PRE-pittato su un
::after del tile (la art ha overflow:hidden) e respira in OPACITY (compositor, zero repaint). */
.tnode.is-building .tnode-tile::after { content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none; /* glow rimosso */ opacity: 0; animation: gpulse 3.6s ease-in-out infinite; }
.tnode.is-locked .tnode-art { filter: grayscale(.65) brightness(.82); }
.tnode.is-locked .tnode-tile::after { content: ""; position: absolute; top: -6px; right: -6px; z-index: 4; background: url("/assets/ui/padlock.svg") center/12px no-repeat, var(--sky-0); border: 1px solid var(--brass-d); border-radius: 50%; width: 21px; height: 21px; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tnode-body { min-width: 0; }
.tnode-body .card { margin-bottom: 0; }
.tnode-body .card.resource, .tnode-body .card.infra { border-left-width: 3px; }
/* LE DUE RICERCHE DI RILIEVO (16/08/2026, indicate a dito dal committente): Ponte di
Colonizzazione (terraforming) in azzurro e Compressione Antimateriale in viola — bordo
colorato su icona E card, NIENTE glow. Dopo .is-max a pari specificita': l'accento vince
anche a ricerca completata. */
.tnode[data-node="research:terraforming"] .tnode-art,
.tnode[data-node="research:terraforming"] .tnode-body > .card { border-color: #5f93c4; }
.tnode[data-node="research:compressione_antimateriale"] .tnode-art,
.tnode[data-node="research:compressione_antimateriale"] .tnode-body > .card { border-color: var(--viola); }
/* La sbarratura da requisiti scolora l'intero .tnode-art, bordo compreso: sui due nodi di
rilievo il velo passa alla sola immagine, cosi' il bordo tiene il suo colore. */
.tnode.is-locked[data-node="research:terraforming"] .tnode-art,
.tnode.is-locked[data-node="research:compressione_antimateriale"] .tnode-art { filter: none; }
.tnode.is-locked[data-node="research:terraforming"] .tnode-art img,
.tnode.is-locked[data-node="research:compressione_antimateriale"] .tnode-art img { filter: grayscale(.65) brightness(.82); }
/* path illumination: flash a prerequisite node, mark the locked source */
.tnode.req-flash .tnode-art { animation: reqflash 1s ease-in-out 2; }
@keyframes reqflash { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,235,190,.22), 0 3px 9px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 0 3px var(--amber); } }
/* Requirements panel on locked items (ships/defenses/techs) */
.reqs { margin-top: 4px; }
.reqs-title { font-size: 11px; letter-spacing: .4px; color: var(--brass-l); text-transform: uppercase; margin-bottom: 4px; }
.reqchip {
display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; margin: 0 6px 6px 0; border-radius: 999px;
font-size: 11px; font: inherit; font-size: 11px; cursor: default; border: 1px solid var(--bronze-d);
background: rgba(0,0,0,.25); color: var(--ink-dim);
}
.reqchip.rq-ok { color: var(--good); border-color: rgba(121,192,140,.5); }
.reqchip.rq-no { color: #e6b89c; border-color: var(--rust); cursor: pointer; }
.reqchip.rq-no:active { transform: translateY(1px); }
.reqchip .rq-have { color: var(--ink-dim); font-size: 10px; }
/* ---- War alert banner ---- */
.warbar {
/* In flow directly under the sticky header, above the build progress strip
(order: header → alert → progress). The header's under-attack pulse stays the
persistent indicator once this scrolls out of view. */
position: relative; z-index: 19;
background: linear-gradient(180deg, #5a1410, #350c08); color: #ffd9d2;
border-bottom: 1px solid var(--rust); font-size: 12px; font-weight: 700; text-align: center;
padding: 8px 12px; letter-spacing: .2px; box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.warbar .wb-acc { opacity: .75; font-weight: 600; }
/* battito delle barre d'avviso: velo in opacity (compositor), non brightness (repaint) */
.warbar::after, .guildfreebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; --pk: .16; animation: gpulse 1.6s ease-in-out infinite; }
/* ---- Energy overload bar (thin strip under the header) ----
Overclock (101–105%): amber, gentle pulse. Shutdown (>105%): red, faster red pulse. */
.energybar {
position: relative; z-index: 19; text-align: center; padding: 4px 12px;
font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
border-bottom: 1px solid; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.energybar b { font-variant-numeric: tabular-nums; text-transform: none; }
.energybar.over {
background: linear-gradient(180deg, #4a3810, #2c2107); color: var(--amber-l);
border-bottom-color: var(--amber);
}
.energybar.down {
background: linear-gradient(180deg, #5a1410, #350c08); color: #ffd9d2;
border-bottom-color: var(--rust);
}
/* battito overload/blackout in opacity (compositor) al posto di brightness (repaint) */
.energybar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.energybar.over::after { --pk: .13; animation: gpulse 2.2s ease-in-out infinite; }
.energybar.down::after { --pk: .24; animation: gpulse 1s ease-in-out infinite; }
/* ---- Avviso novizi (azzurro, scudo, testo bianco) sotto l'header ---- */
.noticebar {
position: relative; z-index: 19; text-align: center; padding: 8px 12px;
background: linear-gradient(180deg, #1f5f96, #123f68); color: #fff;
border-bottom: 1px solid #4f9fd6; font-size: 12px; font-weight: 700; letter-spacing: .2px;
box-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.noticebar .gi { filter: brightness(0) invert(1); vertical-align: -2px; }
/* ---- Evento mondiale: banner criptico della vigilia (viola notte, corsivo) ---- */
/* Marrone d'ottone come i drawer / il banner God Mode; testo in corsivo, nessuna icona. */
.cryptbar {
position: relative; z-index: 19; text-align: center; padding: 8px 12px;
background: linear-gradient(180deg, #2a1f10, #180f06); color: var(--brass-l);
border-bottom: 1px solid var(--bronze-d); font-size: 12px; font-style: italic; letter-spacing: .3px;
box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.cryptbar i { font-style: italic; }
/* ---- Avviso one-time selettore isola: marrone/oro (come il cryptbar/drawer), bordo d'ottone,
edge-to-edge sotto il selettore. Sparisce per sempre al primo tocco del selettore. ---- */
.islbar-hint {
position: relative; z-index: 18; text-align: center; padding: 8px 12px;
background: linear-gradient(180deg, #2a1f10, #180f06); color: var(--brass-l);
border-bottom: 1px solid var(--bronze-d); border-top: 1px solid var(--brass-d);
font-size: 12px; font-weight: 600; letter-spacing: .2px;
box-shadow: 0 3px 12px rgba(0,0,0,.4);
animation: ibHintIn .35s ease-out;
}
.islbar-hint b { color: #fff; font-weight: 700; }
.islbar-hint .gi { filter: brightness(0) invert(.86) sepia(.4) saturate(3) hue-rotate(3deg); vertical-align: -2px; }
@keyframes ibHintIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ---- Richiamo alle armi: fascia della mobilitazione del Pinnacolo ----
Stesse misure della fascia dell'energia (e' lo stesso posto e devono sembrare parenti), ma
fondo di guerra e scritta d'ottone: il rosso dice che c'e' una scadenza, l'oro che e' roba
di gilda e non un guasto. Niente aloni: bordo sopra e sotto e ombra scura, come da regola. */
.mobilbar {
position: relative; z-index: var(--z-hud); text-align: center; padding: var(--sp-4) var(--sp-12);
font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
background: linear-gradient(180deg, #4a1410, #2b0a08);
color: var(--brass-l);
border-top: 1px solid var(--bronze-d); border-bottom: 1px solid var(--brass);
box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.mobilbar { cursor: pointer; } /* si tocca per metterla via: il popup chiede conferma */
.mobilbar .gi { vertical-align: -2px; margin-right: var(--sp-6); }
/* Il tempo che resta e' l'unica parte che cambia da sola: cifre a passo fisso, cosi' la fascia
non balla a ogni secondo, e in ottone chiaro perche' e' LEI la notizia. */
.mobilbar b { font-variant-numeric: tabular-nums; text-transform: none; color: #f4d9a4; }
.mobilbar .mb-sep { opacity: .5; margin: 0 var(--sp-6); }
/* ---- Miniere ferme ----
Stesse misure delle due fasce qui sopra: e' lo stesso posto e devono sembrare parenti. Il
colore no: niente rosso di guerra e niente ambra d'allarme, ma il grigio-ferro di una macchina
spenta. Non c'e' niente da fare e niente da temere, e' uno stato che scade da solo — e il
giocatore deve leggerlo in mezzo secondo senza spaventarsi. Non e' cliccabile di proposito:
non si mette via, perche' non e' un avviso, e' una condizione. */
.minebar {
position: relative; z-index: var(--z-hud); text-align: center; padding: var(--sp-4) var(--sp-12);
font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
background: linear-gradient(180deg, #232a30, #14191d);
color: #b8a883;
border-top: 1px solid #3a4249; border-bottom: 1px solid var(--bronze-d);
box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.minebar .gi { vertical-align: -2px; margin-right: var(--sp-6); opacity: .75; }
.minebar b { font-variant-numeric: tabular-nums; text-transform: none; color: #e6d7b4; }
.minebar .mb-sep { opacity: .5; margin: 0 var(--sp-6); }
/* ---- Annuncio server effimero (Anello Mitico droppato): banner rosso-mitico, 15s ---- */
.announcebar {
position: relative; z-index: 19; text-align: center; padding: 8px 12px;
background: linear-gradient(180deg, #3a1420, #24030d); color: #f3d9df;
border-bottom: 1px solid #e7627a; font-size: 12px; font-weight: 700; letter-spacing: .2px;
animation: announcePop .35s ease-out;
}
.announcebar .rar-mitico { color: #ff8098; }
.announcebar .gi { vertical-align: -2px; }
.announcebar .subtle { color: #d69fab; font-weight: 600; }
@keyframes announcePop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .announcebar { animation: none; } }
/* ---- Evento gilda gratis (rosso pulsante, timer) sotto l'header ---- */
.guildfreebar {
position: relative; z-index: 19; text-align: center; padding: 8px 12px;
background: linear-gradient(180deg, #5a1410, #350c08); color: #ffd9d2;
border-bottom: 1px solid var(--rust); font-size: 12px; font-weight: 700; letter-spacing: .2px;
box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.guildfreebar b { font-variant-numeric: tabular-nums; }
/* Alone di stato — ambra in overclock, rosso in spegnimento. Applicato alla card MACRO
Energia (l'accordion parent, tra Costruzioni e Ricerche) e al box Regolazione produzione,
NON alla barra di carico interna. */
.accordion.en-over, .throttle-panel.over { box-shadow: 0 0 0 1px rgba(233,181,74,.35); }
.accordion.en-down, .throttle-panel.down { box-shadow: 0 0 0 1px rgba(196,60,40,.5); }
/* respiro in opacity (compositor): alone base fisso sull'elemento, bagliore interno che
pulsa sull'::after (overflow:hidden clipperebbe un glow esterno del pseudo) */
.accordion.en-over::after, .throttle-panel.over::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(233,181,74,.5); opacity: 0; animation: gpulse 2.2s ease-in-out infinite; }
.accordion.en-down::after, .throttle-panel.down::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(224,72,50,.7); opacity: 0; animation: gpulse 1s ease-in-out infinite; }
/* Il box Regolazione produzione pulsa in CONTROFASE (battere e levare) rispetto alla card
macro: sfasato di metà periodo con animation-delay negativo. Attira l'occhio sui comandi. */
.throttle-panel.over { animation-delay: -1.1s; }
.throttle-panel.down { animation-delay: -0.5s; }
/* ---- Inbox ---- */
.notif { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--slate-3); }
.notif:last-child { border-bottom: none; }
/* Fixed-height, vertically-scrollable inbox lists (swipe) with infinite scroll (+50). */
.inbox-scroll { max-height: 46vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
scrollbar-width: thin; overscroll-behavior: contain; }
.card.inbox-scroll { padding-top: 4px; padding-bottom: 4px; }
/* Messaggi in un riquadro come l'inbox notifiche qui sopra: lo scroll taglia le card
dietro una cornice intenzionale, non più a filo pagina (hard edge). */
.inbox-scroll-msgs { max-height: 52vh; padding: 8px 8px 0; border: 1px solid var(--slate-3); border-radius: 12px; background: rgba(0,0,0,.14); }
/* Flash quando si salta a un messaggio da una notifica DM: alone ambra che sfuma. */
.card.msg-flash { animation: msgFlash 1.7s ease-out; }
@keyframes msgFlash {
0% { box-shadow: 0 0 0 0 rgba(233,181,74,0); }
12% { box-shadow: 0 0 0 2px var(--amber); }
100% { box-shadow: 0 0 0 0 rgba(233,181,74,0); }
}
@media (prefers-reduced-motion: reduce) { .card.msg-flash { animation: none; } }
.inbox-end { text-align: center; font-size: 11px; padding: 8px 0 2px; opacity: .6; }
/* Type-colored medallion: the ring color telegraphs what kind of event it is before reading. */
.notif-ico { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
font-size: 14px; line-height: 1; border-radius: 50%;
border: 1px solid var(--bronze-d); background: rgba(0,0,0,.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.4);
filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.notif-ico.nt-attack, .notif-ico.nt-defense, .notif-ico.nt-incoming { border-color: var(--rust); background: linear-gradient(180deg, rgba(140,46,28,.3), rgba(0,0,0,.3)); }
.notif-ico.nt-scout { border-color: var(--patina); background: linear-gradient(180deg, rgba(103,185,168,.16), rgba(0,0,0,.3)); }
.notif-ico.nt-expedition, .notif-ico.nt-ship { border-color: var(--brass); background: linear-gradient(180deg, rgba(195,156,95,.18), rgba(0,0,0,.3)); }
.notif-ico.nt-market, .notif-ico.nt-daily, .notif-ico.nt-medal { border-color: var(--amber); background: linear-gradient(180deg, rgba(233,181,74,.16), rgba(0,0,0,.3)); }
.notif-ico.nt-guild, .notif-ico.nt-pinnacolo { border-color: var(--bronze); }
.notif-ico.nt-energy { border-color: var(--good); }
.notif-txt { flex: 1 1 auto; font-size: 13px; }
.notif-time { font-size: 11px; color: var(--ink-dim); flex: 0 0 auto; white-space: nowrap; }
.notif-x { cursor: pointer; } .notif-x:hover { opacity: .92; }
.notif-detail { padding: 4px 0 10px; border-bottom: 1px solid var(--slate-3); }
.notif-detail .card { margin-bottom: 0; }
.field { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 8px; letter-spacing: .2px; }
.field select, .field textarea, .field input {
display: block; box-sizing: border-box; width: 100%; margin-top: 4px;
background: var(--sky-0); color: var(--ink); border: 1px solid #0b0f13; border-radius: 8px;
padding: 10px; font: inherit; font-size: 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
}
.field textarea { resize: vertical; min-height: 66px; }
.field select:focus, .field textarea:focus, .field input:focus { outline: none; border-color: var(--brass); box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 0 0 2px rgba(195,156,95,.2); }
/* ---- Emblem picker + segmented control (guild) ---- */
.emblem-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 6px; }
.emblem {
aspect-ratio: 1; display: grid; place-items: center; font-size: 22px; cursor: pointer;
border-radius: 8px; border: 1px solid var(--bronze-d); color: var(--ink);
background: radial-gradient(120% 120% at 30% 20%, var(--panel-2), var(--sky-0));
box-shadow: inset 0 1px 0 var(--edge-hi);
}
.emblem.sel { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(233,181,74,.5), inset 0 1px 0 var(--edge-hi); transform: translateY(-1px); }
.seg { display: flex; gap: 0; margin-top: 4px; border: 1px solid var(--bronze-d); border-radius: 8px; overflow: hidden; }
.seg button {
flex: 1; min-height: 40px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
background: var(--panel-0); color: var(--ink-dim); border-right: 1px solid #0c1116;
}
.seg button:last-child { border-right: none; }
.seg button.on { background: linear-gradient(180deg, var(--panel-2), var(--panel-1)); color: var(--amber-l); box-shadow: inset 0 1px 0 var(--edge-hi); }
/* ---- Accordion (collapsible game panels) ---- */
.accordion {
position: relative;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0));
border: 1px solid #0c1116; border-radius: var(--radius);
margin-bottom: 12px; overflow: hidden;
box-shadow: inset 0 1px 0 var(--edge-hi), 0 6px 16px rgba(0,0,0,.4);
}
.accordion::before { /* brass top seam */
content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass-l) 50%, var(--brass) 80%, transparent); opacity: .45;
}
.acc-head {
width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 12px 12px; background: none; border: none; color: var(--ink);
font-size: 14px; font-weight: 700; cursor: pointer; text-align: left;
}
.acc-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); letter-spacing: .8px; font-size: 14px; }
/* Pallino rosso "novità" (es. chat/direttive con nuovi messaggi), oltre al glow del bordo. */
.acc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rust); /* glow rimosso */ border: 1px solid #2a0c06; flex: 0 0 auto; align-self: center; }
/* Sui banner il pallino "novità" va nell'angolo alto-destra, sul bullone d'ottone,
con un glow più marcato (pulsa) così si nota anche a card chiusa. */
.acc-head.acc-banner .acc-dot {
position: absolute; top: 5px; right: 5px; z-index: 3;
width: 11px; height: 11px;
box-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.acc-head.acc-banner .acc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; /* glow rimosso */ opacity: 0; animation: gpulse 1.4s ease-in-out infinite; }
/* col pallino acceso, nascondi il bullone in alto a destra (il pallino ne prende il posto) */
.acc-head.acc-banner:has(.acc-dot) .acc-rivets::after { opacity: 0; }
/* Banner header: section art fills the width; text sits on a scrim so it stays readable.
+50% height vs the plain header, and it stays as a top banner when the card expands. */
.acc-head.acc-banner {
position: relative; min-height: 76px; align-items: flex-end; padding-bottom: 8px;
background-size: cover; background-position: center 40%; background-repeat: no-repeat;
}
.acc-head.acc-banner::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,12,16,0) 25%, rgba(8,12,16,.55) 62%, rgba(8,12,16,.92) 100%);
pointer-events: none;
}
.acc-head.acc-banner .acc-title,
.acc-head.acc-banner .acc-right { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.acc-head.acc-banner .acc-title { font-size: 16px; letter-spacing: 1px; }
/* Aperto: NIENTE linea d'ottone che brilla sotto il banner (sembrava sollevare la card). Il
banner scorre dritto nel corpo — solo lo slide, sobrio e pulito. */
.accordion.open .acc-head.acc-banner { border-bottom: none; }
/* Brass frame around banner sections: bronze outer border + engraved inner fillet with
riveted corners, so the collapsed stack reads as framed plates instead of flat strips. */
.accordion.has-banner {
border: 1px solid rgba(195,156,95,.5);
box-shadow: inset 0 1px 0 var(--edge-hi), 0 6px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.55);
}
.accordion.has-banner::before { opacity: .8; }
.acc-head.acc-banner::after {
content: ""; position: absolute; inset: 4px; border-radius: 4px;
border: 1px solid rgba(216,181,121,.38);
box-shadow: inset 0 0 14px rgba(0,0,0,.45);
pointer-events: none;
}
/* corner rivets on the inner fillet */
.acc-head.acc-banner .acc-rivets, .acc-head.acc-banner .acc-rivets::before,
.acc-head.acc-banner .acc-rivets::after { position: absolute; pointer-events: none; }
.acc-head.acc-banner .acc-rivets { inset: 0; z-index: 1; }
.acc-head.acc-banner .acc-rivets::before, .acc-head.acc-banner .acc-rivets::after {
content: ""; width: 5px; height: 5px; border-radius: 50%; top: 8px;
background: radial-gradient(circle at 35% 30%, var(--brass-l), var(--brass) 55%, #4a3a22);
box-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.35);
}
.acc-head.acc-banner .acc-rivets::before { left: 8px; }
.acc-head.acc-banner .acc-rivets::after { right: 8px; }
.acc-right { display: flex; align-items: center; gap: 10px; flex: none; }
/* Titolo Gilda con crestIcon: l'icona resta fissata in alto (align-items:flex-start) mentre nome
+ tag [GILDA] vivono in un normale span inline (gh-title-text) che scorre e va a capo come
testo — se il nome è lungo il tag lo segue sul secondo rigo invece di restare centrato a metà
tra le due righe (comportamento di un flex-row con align-items:center sul blocco intero). */
.gh-title-wrap { display: flex; align-items: flex-start; gap: 10px; }
.gh-title-wrap > :first-child { flex: none; margin-top: 1px; }
.gh-title-text .chip { vertical-align: middle; margin-left: 2px; }
.acc-meta { font-size: 12px; color: var(--amber); font-variant-numeric: tabular-nums; }
.acc-chevron { color: var(--brass); transition: transform .18s ease; }
.accordion.open .acc-chevron { transform: rotate(180deg); }
/* Glow giallo sulla card (es. Chat & Direttive con un nuovo messaggio non letto) */
.accordion.acc-glow { border-color: var(--amber); box-shadow: inset 0 1px 0 var(--edge-hi), 0 6px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(233,181,74,.25); }
.accordion.acc-glow .acc-title { color: var(--amber-l); }
/* respiro ambra in opacity (compositor): bagliore interno perché l'accordion ha overflow:hidden */
.accordion.acc-glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(233,181,74,.5); opacity: 0; animation: gpulse 1.6s ease-in-out infinite; }
.accordion.open .acc-head { border-bottom: none; }
/* Tendina con SLIDE morbido: altezza animata via max-height gestita in JS (toggleSection misura
scrollHeight) → niente più lo scatto display:none↔block sulle card lunghe di Isola/Gilda.
A riposo max-height:0 (chiusa) / none (aperta, così i contenuti dinamici non vengono tagliati);
durante la transizione il JS imposta un max-height in px per far scorrere l'altezza. */
.acc-body { overflow: hidden; max-height: 0;
transition: max-height .28s cubic-bezier(.4, 0, .2, 1);
background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 40%); }
.accordion.open .acc-body { max-height: none; }
/* L'ESPANDIBILE ENERGIA SI RICONOSCE AL VOLO (16/08/2026): velatura azzurra sullo sfondo del
corpo, perche' i giocatori confondono centrali e miniere — il colore lo dice prima del testo.
Solo tinta di fondo: card, corsie e tubo restano quelli di sempre. Niente glow. */
.accordion[data-sec="energia"] .acc-body {
background: linear-gradient(180deg, rgba(88, 146, 202, .17), rgba(52, 96, 142, .07) 45%, rgba(52, 96, 142, .03) 100%);
}
.accordion.acc-noanim .acc-body { transition: none; } /* collasso istantaneo delle sorelle (ancora anti-salto esatta) */
.acc-body-in { padding: 12px; }
.acc-body-in > .card:last-child, .acc-body-in > .accordion:last-child { margin-bottom: 0; }
/* ---- Sondaggi di gilda (stile WhatsApp, veste ottone) ---- */
.btn-wide { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
/* Wizard Invia (Logistica): una card per volta. Briciole in testa — passi FATTI in ottone
(tappabili col valore scelto), CORRENTE acceso ambra, FUTURI spenti; «‹» piccolo e
discreto per tornare indietro. Cornici uniformi, no glow. */
.lw-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.lw-back { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bronze-d);
background: rgba(255,255,255,.03); color: var(--brass-l); font-size: 16px; line-height: 1;
cursor: pointer; flex: none; }
.lw-back:hover { border-color: var(--brass); }
.lw-crumb { border: 1px solid var(--line); background: none; color: var(--ink-dim);
border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.lw-crumb:disabled { cursor: default; opacity: .5; }
.lw-crumb.done { color: var(--brass-l); border-color: var(--bronze-d); opacity: 1; }
.lw-crumb.on, .lw-crumb.on:disabled { color: var(--amber-l); opacity: 1;
border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
background: color-mix(in srgb, var(--amber) 8%, transparent); }
.lw-crumb small { font-size: 10px; color: var(--ink-dim); max-width: 90px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.lw-sep { color: var(--ink-dim); font-size: 12px; flex: none; }
.lw-next { display: flex; justify-content: flex-end; margin-top: 10px; }
.poll-actions { display: flex; gap: 8px; margin-top: 8px; }
.poll-actions .btn { flex: 1 1 0; justify-content: center; }
/* Card Chat & Direttive: pila azioni SIMMETRICA — ogni riga a tutta larghezza, gap uniforme.
La direttiva nuova è una stella ambra DENTRO il bottone chat (stesso idioma del contatore
sui Piani di Guerra), niente chip orfana in mezzo alla pila. No glow. */
.gc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gc-actions .poll-actions { margin-top: 0; }
.gc-actions .poll-actions .btn { flex: 1 1 0; }
/* Direttiva nuova = ping rosso in alto a destra del bottone chat (niente stella, no glow). */
.gc-actions .btn { position: relative; }
.gc-ping { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%;
background: var(--rust); border: 1px solid #0c0f16; }
/* I SONDAGGI PARLANO LA LINGUA DELLE ALTRE CARD (16/08/2026). Ereditavano `.card` nudo, cioe'
il RAIL SINISTRO da 3px — che in questo gioco appartiene SOLO alle action-card delle Missioni
— e gli angoli morbidi: dentro un popup di plancia stonavano. Qui si ricopia la pelle che il
blocco `#views .card` impone a tutte le card di gioco: cornice d'ottone su tutti e quattro i
lati, angoli a 4px, fondo bruciato. Serve scriverla a mano perche' l'overlay vive FUORI da
#views e quella regola non lo raggiunge. */
.poll-card {
margin-top: 10px;
background: linear-gradient(180deg, #1a2029, #12140f);
border: 1px solid var(--rw-brass, #6d4f24);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(240,209,138,.16), inset 0 -3px 8px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.45);
}
.poll-q { font-family: var(--font-display); font-size: 14px; color: var(--brass-l); letter-spacing: .3px; display: flex; align-items: center; gap: 6px; }
.poll-q .gi { width: 16px; height: 16px; flex: none; }
.poll-q .poll-rm { margin-left: auto; flex: none; }
.poll-sub { font-size: 11px; margin: 4px 0 8px; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 8px 10px; border-radius: 8px; border: 1px solid var(--slate-3); background: var(--slate-1); color: var(--ink);
font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s; }
.poll-opt:active { transform: translateY(1px); }
.poll-opt .po-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(176,141,87,.28), rgba(236,205,142,.16)); border-radius: 8px 0 0 8px; transition: width .35s ease; z-index: 0; }
.poll-opt .po-tick { position: relative; z-index: 1; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--bronze-d);
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--slate-0); background: transparent; }
.poll-opt .po-text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
.poll-opt .po-count { position: relative; z-index: 1; flex: none; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-weight: 700; }
.poll-opt.on { border-color: var(--brass); background: linear-gradient(180deg, var(--slate-2), var(--slate-1)); }
.poll-opt.on .po-tick { border-color: var(--brass-l); background: var(--brass-l); }
.poll-opt.on .po-count { color: var(--brass-l); }
.poll-rm { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px;
border: 1px solid var(--slate-3); background: var(--slate-1); color: var(--rust); cursor: pointer; }
/* display:block = centring flex esatto (via il vertical-align em di .gi); il glifo del cestino
pende ~5% verso il basso nel suo viewBox → background risollevato di 1px. */
.poll-rm .gi { width: 19px; height: 19px; display: block; margin: 0; background-position: center calc(50% - 1px); }
.poll-rm:hover { border-color: var(--rust); }
/* Archivia (chiudi sondaggio): stesso tasto ma tinta ottone; sta PRIMA di Rimuovi, quindi eredita
lui il margin-left:auto e il Rimuovi gli si affianca. */
.poll-q .poll-rm + .poll-rm { margin-left: 6px; }
.poll-arch:hover { border-color: var(--brass); }
.poll-q .poll-closed { margin-left: auto; flex: none; font-size: 10px; color: var(--ink-dim); }
.poll-q .poll-closed + .poll-rm { margin-left: 6px; }
/* Overlay creazione + storico (riusa .dl-sheet/.dl-head) */
.poll-sheet { width: min(440px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.poll-form, .poll-hist-body { padding: 12px 16px 16px; overflow-y: auto; }
.poll-hist-body { display: flex; flex-direction: column; }
.poll-hist-body .poll-card:first-child { margin-top: 0; }
.poll-opt-label { margin: 12px 0 6px; font-size: 12px; }
.poll-opt-row { margin-bottom: 6px; }
.poll-add { margin: 2px 0 4px; }
.poll-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; cursor: pointer; }
.poll-toggle input { width: 17px; height: 17px; accent-color: var(--brass); flex: none; }
.ph-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
/* Righe del risultato: stessa grammatica delle righe di gioco (fondo scuro + filo d'ottone),
non riquadri d'ardesia che sembrano di un'altra applicazione. */
.ph-opt { display: flex; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-4) var(--sp-8); border-radius: 4px;
background: linear-gradient(180deg, #202836, #171b13); border: 1px solid rgba(106,81,38,.45); font-size: 12px; }
.ph-opt b { color: var(--brass-l); font-variant-numeric: tabular-nums; }
/* Locked accordion (e.g. guild cards without a guild): dimmed, no chevron, not expandable */
.accordion.locked-acc { opacity: .5; }
.accordion.locked-acc .acc-head { cursor: default; }
.accordion.locked-acc .acc-title { color: var(--ink-dim); }
.acc-lock { color: var(--patina); font-size: 13px; }
/* ---- Bottom dock ---- */
.bottomnav {
position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + var(--safe-b));
padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr);
background: linear-gradient(180deg, #1d2a3b, #121a27); border-top: 1px solid var(--bronze-d); z-index: 30;
box-shadow: 0 -4px 16px rgba(0,0,0,.45), inset 0 1px 0 var(--edge-hi);
}
.bottomnav::before {
content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
background: linear-gradient(90deg, transparent, var(--brass) 15%, var(--brass-l) 50%, var(--brass) 85%, transparent); opacity: .5;
}
.navbtn {
position: relative; min-height: var(--tap); background: none; border: none; color: var(--ink-dim);
font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; line-height: 1;
display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
padding-bottom: 2px; cursor: pointer; white-space: nowrap;
}
/* Medaglioni d'ottone circolari (silhouette game-icons.net). La moneta è già rotonda,
quindi lo slot è un cerchio pieno: niente box quadrato dietro. L'attivo è un alone
ambrato CIRCOLARE che sfuma a trasparente (nessuna sagoma quadrata). Niente :has()
così è robusto anche dove non è supportato.
VIETATO usare filter (saturate/brightness/drop-shadow) sugli SVG qui: WebKit mobile
rasterizza l'SVG filtrato in un buffer opaco → riappare il quadrato scuro dietro la
moneta. Dim = opacity, glow attivo = box-shadow sul cerchio (segue il border-radius). */
.navbtn .navicon {
--nav-base: 1; /* scala a riposo del medaglione (per-bottone, sotto) */
width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 50%; transform: scale(var(--nav-base)); transform-origin: bottom center;
transition: background .15s, box-shadow .15s, transform .18s ease;
}
/* SOLO Azioni: medaglione ingrandito ancorato alla BASE (cresce verso l'alto e sconfina sopra il
bordo del footer). Il transform non rifluisce → la label resta fissa. Icona sempre a piena opacità. */
.navbtn[data-view="azioni"] .navicon { --nav-base: 1.5; }
/* Gli altri medaglioni: +5% ancorati alla base (crescono verso l'alto, label fissa). */
.navbtn[data-view="isola"] .navicon,
.navbtn[data-view="unita"] .navicon,
.navbtn[data-view="gilda"] .navicon,
.navbtn[data-view="profilo"] .navicon { --nav-base: 1.05; }
/* SELEZIONE: il medaglione attivo cresce del +10% (relativo alla sua scala base), ancorato alla
base come sempre. Al tap fa un piccolo overshoot al +13% e rientra al +10% → feedback vivo ma
seamless. Deselezionando, la transition su transform lo riporta dolcemente alla base. */
.navbtn.on .navicon { transform: scale(calc(var(--nav-base) * 1.05)); animation: navpop .3s ease-out; }
@keyframes navpop {
0% { transform: scale(var(--nav-base)); }
55% { transform: scale(calc(var(--nav-base) * 1.08)); }
100% { transform: scale(calc(var(--nav-base) * 1.05)); }
}
/* niente translateZ(0): senza il layer GPU pre-rasterizzato a 32px l'SVG viene scalato come
vettore → nitido anche a 1.5×. Spento un filo più acceso degli altri (.85) perché il
medaglione ingrandito sporge e va tenuto leggibile; a piena opacità quando attivo. */
.navbtn[data-view="azioni"] .navicon-svg { transform: none; opacity: .9; }
/* Il footer non deve ritagliare il medaglione Azioni che sporge in alto. */
.bottomnav, .navbtn { overflow: visible; }
.navicon-img { width: 24px; height: 24px; display: block; }
/* translateZ(0) tiene l'SVG SEMPRE su un layer GPU: senza, il passaggio opacity .74→1
crea/distrugge il layer e su mobile l'icona "salta" di un subpixel al cambio tab. */
.navicon-svg { width: 32px; height: 32px; display: block; opacity: .74; transition: opacity .15s; transform: translateZ(0); backface-visibility: hidden; }
.navbtn.on { color: var(--amber-l); }
.navbtn.on .navicon {
background: radial-gradient(circle at 50% 45%, rgba(233,181,74,.30), rgba(233,181,74,0) 72%);
/* glow rimosso */
}
.navbtn.on .navicon-svg { opacity: 1; }
.navbtn .dot { position: absolute; top: 7px; right: 50%; margin-right: -20px; width: 9px; height: 9px; border-radius: 50%; background: var(--rust); /* glow rimosso */ border: 1px solid #2a0c06; }
/* Azioni: il medaglione è ingrandito (1.5×, ancorato in basso → cresce verso l'alto), quindi il
pallino va alzato per restare sul suo bordo alto-destro invece che a mezz'aria come sugli altri. */
.navbtn[data-view="azioni"] .dot { top: -6px; margin-right: -24px; }
/* BUSTA invece del pallino quando ad aspettare è un messaggio di ciurma: cambia la FORMA, non
il colore — resta il rosso del ping, così nella barra è sempre lo stesso richiamo e a dirti
che si tratta di parole è la sagoma.
Perché la busta e non la nuvoletta: la chat.svg è un palloncino largo con una coda sottile,
e sotto i 16px la coda finisce in un pixel sbavato — non legge come nuvoletta, legge come un
pallino storto (è quello che stonava). La busta è compatta e simmetrica: a 14 si riconosce.
La svg fa da MASCHERA perché l'icona d'ottone del set non si tingerebbe; niente bordo né
raggio, la forma È il messaggio. */
/* IDENTICA AL PALLINO, cambia solo la sagoma: stesso rosso (--rust) e stesso bordo bruno
(#2a0c06, quello di `border: 1px solid` del tondo).
IL CONTORNO STA SUL CONTENITORE, LA MASCHERA SUL FIGLIO — e non è un vezzo: nel rendering
CSS il `filter` si applica PRIMA della `mask`, quindi mettendoli sullo stesso elemento il
contorno veniva ritagliato via insieme al resto e spariva (era il difetto: il bordo non si
vedeva affatto). Con la maschera su ::before, il filtro del genitore traccia il profilo
della forma GIÀ ritagliata. Quattro copie a raggio ZERO spostate di un pixel = contorno
pieno da 1px; niente sfocature, che darebbero un alone (vietato). */
.navbtn .dot.dot-chat {
width: 12px; height: 12px; top: 6px; margin-right: -22px;
border: 0; border-radius: 0; background: none;
/* Il bruno è SEMITRASPARENTE (.75) e non pieno come sul tondo: la nuvoletta è 12px contro 9,
quindi lo stesso identico contorno le pesava addosso molto più che al pallino e stonava.
Stessa geometria da 1px, meno contrasto — a schermo i due badge si equivalgono. */
filter:
drop-shadow(1px 0 0 rgba(42,12,6,.75)) drop-shadow(-1px 0 0 rgba(42,12,6,.75))
drop-shadow(0 1px 0 rgba(42,12,6,.75)) drop-shadow(0 -1px 0 rgba(42,12,6,.75));
}
.navbtn .dot.dot-chat::before {
content: ""; display: block; width: 100%; height: 100%; background: var(--rust);
-webkit-mask: url("/assets/ui/chat.svg?v=1") center / contain no-repeat;
mask: url("/assets/ui/chat.svg?v=1") center / contain no-repeat;
}
/* ---- Toasts ---- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 14px); z-index: 100; width: min(92vw, 460px); display: flex; flex-direction: column; gap: 8px; }
/* Niente rail colorato a sinistra: lo stato (info/errore/successo) lo dà un pallino
iniziale + la cornice tinta su tutti i lati. */
.toast {
display: flex; align-items: center; gap: 8px;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0)); border: 1px solid var(--bronze-d);
border-radius: 8px; padding: 12px 12px; font-size: 13px;
box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 var(--edge-hi); animation: rise .2s ease;
}
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); }
.toast.err, .toast.error, .toast.bad { border-color: color-mix(in srgb, var(--rust) 55%, var(--bronze-d)); }
.toast.err::before, .toast.error::before, .toast.bad::before { background: var(--rust); }
.toast.win, .toast.ok { border-color: color-mix(in srgb, var(--amber) 55%, var(--bronze-d)); }
.toast.win::before, .toast.ok::before { background: var(--amber); }
.toast.info { border-color: color-mix(in srgb, var(--patina) 55%, var(--bronze-d)); }
.toast.info::before { background: var(--patina); }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
/* ---- Confirm dialog (centered yes/no for sensitive actions) ---- */
/* UN POPUP COPRE SEMPRE IL PANNELLO CHE L'HA APERTO (15/08/2026). `.confirm-overlay` è la classe
di TUTTI i riquadri creati a caldo — castone, anello, isola, colosso, lista bersagli, scheda
gilda, profilo — e stava a 60, cioè SOTTO ogni pannello a schermo intero (80) e sotto lo
Storico (70). Chi apriva un oggetto da dentro lo Storico non vedeva comparire niente: il
riquadro c'era, disegnato dietro. Il difetto era già stato incontrato tre volte e curato tre
volte sul singolo overlay (`#confirm-overlay` a 80, `#guild-overlay`/`#player-overlay` a 90) —
cioè sul sintomo. Il token `--z-dialog` esiste da sempre e dice esattamente questo. */
.confirm-overlay { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: 20px; }
/* Il sì/no generico è spesso invocato DA uno di quei riquadri (incastona? svendi? richiama?):
deve stare sopra anche a loro, non alla loro stessa quota. */
#confirm-overlay { z-index: calc(var(--z-dialog) + 2); }
.confirm-backdrop { position: absolute; inset: 0; background: rgba(6,9,13,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.confirm-box {
position: relative; z-index: 1; width: 100%; max-width: 360px;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0));
border: 1px solid var(--bronze-d); border-radius: var(--radius);
padding: 16px; box-shadow: inset 0 1px 0 var(--edge-hi), 0 22px 56px rgba(0,0,0,.6); animation: rise .16s ease;
}
.confirm-title { margin: 0 0 10px; font-size: 16px; font-family: var(--font-display); letter-spacing: .3px; color: var(--brass-l); }
.confirm-body { font-size: 13px; color: var(--ink-dim); max-height: 62vh; overflow-y: auto; }
/* Pallino rosso "non letto" accanto a un messaggio/notifica da leggere. */
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
background: var(--rust); /* glow rimosso */ border: 1px solid #2a0c06;
margin-right: 6px; vertical-align: middle; }
/* I TRATTEGGI RESTANO SOLO DOVE VOGLIONO DIRE «QUI NON C'E' ANCORA NIENTE» (04/08/2026, ordine
del committente: linee continue in tutto il gioco tranne gli inventari).
La riga tratteggiata aveva finito per fare due mestieri: separare due voci di un elenco, e
segnare una casella vuota. Il secondo e' un significato — una cornice a trattini dice che li'
ci andrebbe qualcosa che non c'e' — il primo era solo decorazione, e in un pannello di sei
righe faceva sembrare provvisorio anche cio' che era definitivo.
Da oggi: separatore = linea continua. Trattini = casella vuota, slot d'anello libero,
bersaglio del trascinamento, obiettivo di guerra non ancora impegnato, chip «aggiungi isola».
Restano tratteggiati anche i due sottolineati dei link (nome capitano, coordinate): non sono
linee di separazione, sono il segno che quella parola si tocca. */
.cf-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--slate-3); }
.cf-line:last-child { border-bottom: none; }
.cf-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cf-cost { display: inline-flex; gap: 8px; }
.confirm-actions { display: flex; gap: 8px; margin-top: 16px; }
.confirm-actions .btn { flex: 1; }
/* Classifica donazioni: popup minimale ancorato in alto, entra con slide verticale (no
spostamento orizzontale). Margini laterali fissi dalla .confirm-overlay (padding). */
.donlb-overlay { place-items: start center; padding: 54px 16px 20px; }
.don-lb-btn { flex: none; width: 30px; height: var(--btn-h-sm); display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(180deg, #24303c, #18222c); border: 1px solid var(--bronze-d); border-radius: 8px; cursor: pointer;
box-shadow: inset 0 1px 0 var(--edge-hi); }
.don-lb-btn .gi { width: 17px; height: 17px; }
.don-lb-btn:active { transform: translateY(1px); }
.dl-sheet {
position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 78vh; display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0));
border: 1px solid var(--bronze-d); border-radius: var(--radius); /* cornice uniforme, niente rail d'ottone in alto */
box-shadow: 0 22px 56px rgba(0,0,0,.6), inset 0 1px 0 var(--edge-hi); overflow: hidden; animation: dlDown .2s ease;
}
@keyframes dlDown { from { transform: translateY(-26px); opacity: 0; } }
.dl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid rgba(195,156,95,.18); }
.dl-title { margin: 0; font-family: var(--font-display); font-size: 14px; letter-spacing: .3px; color: var(--brass-l); display: inline-flex; align-items: center; gap: 8px; }
.dl-title .gi { width: 18px; height: 18px; }
.dl-cols { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim); border-bottom: 1px solid var(--slate-3); }
.dl-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dl-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; }
.dl-row.dl-me { background: rgba(233,181,74,.09); }
.dl-rank { flex: none; width: 22px; text-align: center; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.dl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; color: var(--ink); }
.dl-medal { flex: none; display: inline-flex; }
.dl-medal .gi { width: 14px; height: 14px; }
.dl-lvl { flex: none; width: 46px; text-align: right; color: var(--ink-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.dl-don { flex: none; min-width: 74px; text-align: right; color: var(--brass-l); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.dl-don .gi { width: 12px; height: 12px; }
.dl-empty { padding: 20px 16px; text-align: center; }
/* Dashboard GM: sheet ampio, scroll interno, entra dall'alto (come la classifica donazioni). */
.admin-overlay { place-items: start center; padding: 34px 12px 16px; }
.adm-sheet { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0)); border: 1px solid #0c1116; border-top: 3px solid var(--brass);
border-radius: var(--radius); box-shadow: 0 22px 56px rgba(0,0,0,.6), inset 0 1px 0 var(--edge-hi); overflow: hidden; animation: dlDown .2s ease; }
.adm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid rgba(195,156,95,.18); }
.adm-title { margin: 0; font-family: var(--font-display); font-size: 14px; letter-spacing: .3px; color: var(--brass-l); display: inline-flex; align-items: center; gap: 8px; }
.adm-title .gi { width: 18px; height: 18px; }
.adm-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 16px; }
.adm-loading { padding: 40px 16px; text-align: center; }
.adm-sec { margin-bottom: 16px; }
.adm-sec-t { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--brass-l); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--slate-3); }
.adm-alerts { display: flex; flex-direction: column; gap: 6px; }
.adm-alert { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; border: 1px solid transparent; }
.adm-alert .gi { width: 15px; height: 15px; flex: none; }
.adm-alert.crit { background: rgba(196,35,27,.14); border-color: rgba(255,84,54,.4); color: #ff9d85; }
.adm-alert.warn { background: rgba(233,181,74,.12); border-color: rgba(233,181,74,.35); color: var(--amber-l); }
.adm-alert.info { background: rgba(120,150,180,.1); border-color: var(--slate-3); color: var(--ink-dim); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.adm-stat { background: linear-gradient(180deg, var(--panel-1), var(--panel-0)); border: 1px solid #0c1116; border-left: 2px solid var(--bronze-d); border-radius: 8px; padding: 8px 8px; display: flex; flex-direction: column; gap: 1px; }
.adm-k { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-dim); }
.adm-v { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.adm-sub { font-size: 10px; color: var(--ink-dim); }
.adm-bars { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.adm-barrow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-dim); }
.adm-barrow > span:first-child { flex: none; width: 40px; }
.adm-barrow.big > span:first-child { width: auto; min-width: 84px; color: var(--ink); font-variant-numeric: tabular-nums; }
.adm-bar { flex: 1; height: 7px; border-radius: 4px; background: #10171f; overflow: hidden; border: 1px solid #0c1116; }
.adm-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6fb27a, #4d9a63); transition: width .3s ease; }
.adm-bar.warn > i { background: linear-gradient(90deg, #e9b54a, #c99a3e); }
.adm-bar.crit > i { background: linear-gradient(90deg, #ff5436, #c4231b); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #18222c; border: 1px solid var(--slate-3); color: var(--ink-dim); }
.adm-chip.on { color: #8fd6a0; border-color: rgba(120,200,140,.35); }
.adm-chip.off { color: #ff9d85; border-color: rgba(255,84,54,.4); }
.adm-chip.warn { color: var(--amber-l); border-color: rgba(233,181,74,.4); }
/* Testata sezione con controllo a destra (es. selettore periodo). */
.adm-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
padding-bottom: 4px; border-bottom: 1px solid var(--slate-3); }
.adm-sec-h .adm-sec-t { margin: 0; padding: 0; border: none; }
/* Selettore periodo 7g/14g/30g: segmenti d'ottone come i toggle del gioco. */
.adm-per-seg { display: inline-flex; border: 1px solid var(--bronze-d); border-radius: 8px; overflow: hidden; flex: none; }
.adm-per { background: transparent; border: none; border-left: 1px solid var(--bronze-d); color: var(--ink-dim);
font: inherit; font-size: 11px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
.adm-per:first-child { border-left: none; }
.adm-per.on { background: linear-gradient(180deg, rgba(120,84,26,.32), rgba(0,0,0,.2)); color: var(--amber-l); }
/* Grafico iscritti giorno per giorno: barre a colonna con numero sopra e giorno sotto. */
.sg-chart { display: grid; grid-template-columns: repeat(var(--sg-cols, 14), 1fr); gap: 2px; align-items: end;
height: 128px; padding: 2px 0 0; }
.sg-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; gap: 2px; }
.sg-col .sg-n { font-size: 10px; color: var(--ink-dim); font-variant-numeric: tabular-nums; line-height: 1; height: 10px; }
.sg-bar { width: 100%; max-width: 18px; flex: 1; display: flex; align-items: flex-end;
background: rgba(0,0,0,.28); border-radius: 4px 4px 0 0; overflow: hidden; }
.sg-bar > i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, #f0cc79, #bd7d26); }
.sg-col.today .sg-bar > i { background: linear-gradient(180deg, #9fe6c0, #46b98a); }
.sg-col .sg-d { font-size: 10px; color: var(--ink-dim); font-variant-numeric: tabular-nums; line-height: 1; }
.sg-col .sg-w { font-size: 7.5px; color: var(--slate-4, #5a6678); text-transform: uppercase; line-height: 1; letter-spacing: .3px; }
/* Con 30 giorni le colonne sono strette: nascondi le etichette secondarie per non affollare. */
.sg-chart[style*="--sg-cols:30"] .sg-n, .sg-chart[style*="--sg-cols:30"] .sg-w { display: none; }
.adm-fb { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.adm-fb-t { font-size: 12px; color: var(--ink); white-space: pre-wrap; }
.adm-fb-m { font-size: 10px; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
/* Segnalazione cliccabile → apre la scheda profilo (col tasto per scrivere un DM). */
.adm-fb-clk { cursor: pointer; margin: 0 -8px; padding: 6px 8px; border-radius: 8px; transition: background .15s ease; }
.adm-fb-clk:hover { background: rgba(195,156,95,.1); }
.adm-fb-clk:hover .adm-fb-go { color: var(--amber-l); }
.adm-fb-go { margin-left: auto; color: var(--brass); font-weight: 700; white-space: nowrap; }
/* Coda moderazione: header collassabile + elenco messaggi segnalati (tasto "Segnala"). */
.adm-collap { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
.adm-collap:hover { color: var(--amber-l); }
.adm-mod-badge { font-family: var(--font-ui, inherit); letter-spacing: 0; font-size: 11px; font-weight: 700; color: var(--ink-dim);
background: rgba(0,0,0,.25); border: 1px solid var(--bronze-d); border-radius: 999px; padding: 1px 8px; }
.adm-mod-badge.has { color: #14210f; background: var(--rust); border-color: var(--rust); }
.adm-mod-list { display: flex; flex-direction: column; gap: 8px; }
.adm-mod-item { padding: 8px 10px; border: 1px solid var(--slate-3); border-radius: 8px; background: rgba(0,0,0,.18); }
.adm-mod-body { font-size: 12px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.adm-mod-meta { font-size: 10px; margin-top: 4px; }
.adm-mod-sender { cursor: pointer; color: var(--brass); font-weight: 700; }
.adm-mod-sender:hover { color: var(--amber-l); }
.adm-mod-flag { color: var(--rust); font-weight: 700; }
.adm-mod-clear { margin-top: 6px; }
.adm-foot { text-align: center; font-size: 10px; margin-top: 4px; }
/* ---- Guild chat: bottom-sheet overlay ---- */
.chat-overlay { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; justify-content: flex-end; }
.chat-backdrop { position: absolute; inset: 0; background: rgba(6,9,13,.55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.chat-sheet {
position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-height: 86vh;
background: linear-gradient(180deg, var(--panel-2), var(--panel-0));
border: 1px solid var(--bronze-d); border-top: 2px solid var(--bronze); border-radius: 18px 18px 0 0;
box-shadow: 0 -16px 44px rgba(0,0,0,.6), inset 0 1px 0 var(--edge-hi);
padding-bottom: var(--safe-b); animation: sheetUp .22s ease;
}
/* Tastiera aperta (iOS): l'overlay è già ancorato al visual viewport → niente padding safe-area
sul foglio, così il compositore sta a FILO sopra la tastiera senza vuoti. */
.chat-overlay.kb-up .chat-sheet { padding-bottom: 0; }
/* Chat di GILDA (modale desktop) e dock globale in modalità gilda: fondo ROSSO BRACE, i toni
del cielo della tab Gilda — le due chat non si confondono mai. (Su mobile il blocco ≤899px
più sotto ridefinisce lo stesso rosso col raccordo alla status bar.) */
#chat-overlay .chat-sheet, #wchat-overlay.guild-mode .chat-sheet {
/* Le stesse sfumature MORBIDE del cielo della tab Gilda: bagliore granata in alto che
si spegne dolcemente nel bruno scuro — niente stacchi netti. */
background:
radial-gradient(130% 60% at 50% -6%, rgba(96,42,30,.55), transparent 72%),
linear-gradient(180deg, #291411 0%, #1b0d0b 48%, #140908 100%);
}
/* In gilda anche textbox e tasti si scaldano e si SCHIARISCONO un filo: il navy della globale
sul fondo brace faceva a pugni (blu su rosso). Bordi color cuoio, focus resta ottone. */
#chat-overlay .chat-composer textarea, #wchat-overlay.guild-mode .chat-composer textarea {
background: #2a1713; border-color: #4a2a1e;
}
#chat-overlay .chat-composer .chat-actions .btn, #wchat-overlay.guild-mode .chat-actions .btn {
background: #2a1713; border-color: #4a2a1e;
}
#chat-overlay .chat-composer textarea:focus, #wchat-overlay.guild-mode .chat-composer textarea:focus { border-color: var(--brass); }
/* BACHECA: si apre DALLA chat di gilda, quindi porta il suo rosso brace e non l'ardesia
generica dei fogli — un albo che cambia colore rispetto alla stanza da cui esce sembra
un'altra schermata. Stesse due sfumature del foglio di gilda qui sopra. */
#board-overlay .chat-sheet {
background:
radial-gradient(130% 60% at 50% -6%, rgba(96,42,30,.55), transparent 72%),
linear-gradient(180deg, #291411 0%, #1b0d0b 48%, #140908 100%);
/* Niente cornice ai lati e SOTTO: il bordo in fondo disegnava una riga a un dito dal bordo
dello schermo e il foglio sembrava una card ritagliata. Senza, esce da sotto e continua. */
border-left: none; border-right: none; border-bottom: none;
}
#board-overlay .chat-composer textarea { background: #2a1713; border-color: #4a2a1e; }
#board-overlay .chat-composer textarea:focus { border-color: var(--brass); }
/* Gli avvisi: velo caldo sul rosso invece del giallo ottone, che sul brace sbiadiva. */
#board-overlay .board-item {
background: linear-gradient(180deg, rgba(150,32,22,.20), rgba(10,5,4,.28));
border-color: #5a3324;
}
@keyframes sheetUp { from { transform: translateY(100%); } }
/* MOBILE/PWA (≤899px): chat di gilda e chat GLOBALE a schermo intero (ordine di Guglielmo 25/07).
Solo le due chat, NON bacheca/impostazioni (condividono .chat-overlay): height piena, niente raccordi. */
@media (max-width: 899px) {
#chat-overlay .chat-sheet, #wchat-overlay .chat-sheet {
height: 100dvh; max-height: 100dvh; width: 100%; max-width: none; margin: 0;
border: none; border-radius: 0; box-shadow: none;
padding-top: env(safe-area-inset-top, 0px);
/* A schermo intero il gradiente panel-2→panel-0 spalmava l'ardesia CALDA (punta oliva) su
tutto lo schermo: su OLED/Night Shift leggeva come un velo giallo (segnalato 25/07).
BLU NOTTE con le stesse sfumature morbide della gilda ma fredde: bagliore acciaio
in alto che si spegne dolcemente nel navy profondo. */
background:
radial-gradient(130% 34% at 50% -4%, rgba(46,78,116,.5), transparent 72%),
linear-gradient(180deg, #111a28 0%, #0e1520 46%, #0b111b 100%);
}
/* Chat di GILDA a schermo intero: fondo ROSSO BRACE (i toni del cielo della tab Gilda) —
colpo d'occhio immediato su quale delle due chat hai davanti. Vale anche per il dock/overlay
globale quando è commutato in modalità gilda. */
#chat-overlay .chat-sheet, #wchat-overlay.guild-mode .chat-sheet {
/* Stesse sfumature morbide del cielo tab-Gilda, distese su tutto lo schermo:
bagliore granata in alto → bruno scuro, senza stacchi. */
background:
radial-gradient(130% 34% at 50% -4%, rgba(96,42,30,.55), transparent 72%),
linear-gradient(180deg, #291411 0%, #1b0d0b 46%, #140908 100%);
}
/* NIENTE backdrop a schermo intero: il foglio copre già tutto, e su iOS il backdrop-filter
(blur) può dipingersi SOPRA il foglio (bug WebKit di stacking) sfumando il cielo caldo
della tab sotto → era il "film giallo" segnalato da iPhone il 25/07. Via del tutto. */
#chat-overlay .chat-backdrop, #wchat-overlay .chat-backdrop { display: none; }
/* Compositore IN RIGA solo per la chat GLOBALE (un tasto solo): textbox e invio affiancati.
La chat di GILDA tiene i tasti SOTTO la textbox: ufficiali/fondatori ne hanno tre
(pin/megafono/invio) e in riga schiaccerebbero il campo di scrittura. */
#wchat-overlay .chat-composer { flex-direction: row; align-items: stretch; gap: 8px; }
#wchat-overlay .chat-composer textarea { flex: 1 1 auto; min-width: 0; }
#wchat-overlay .chat-actions { flex: none; align-items: stretch; }
#wchat-overlay .chat-actions .btn { height: auto; min-height: 0; align-self: stretch; }
#chat-overlay .chat-sheet::before, #wchat-overlay .chat-sheet::before,
#chat-overlay .chat-sheet::after, #wchat-overlay .chat-sheet::after { display: none; } /* niente grab-handle né cucitura: non è più un foglio */
}
/* ───────── DESKTOP (≥900px) ─────────
Chat di gilda: torna il foglio modale "come prima" (centrato, 640px — regola più sotto).
Chat GLOBALE: NON a schermo intero, ma pannello agganciato in basso a destra, collassabile
verso l'alto e ridimensionabile. Non-modale: la pagina resta usabile mentre è aperta.
Lo stato aperto/chiuso e l'altezza si ricordano (localStorage) → mai da rifare. */
@media (min-width: 900px) {
#wchat-overlay { inset: auto; right: 20px; bottom: 0; left: auto; top: auto;
width: auto; height: auto; z-index: 70; display: block; background: none;
justify-content: flex-start; pointer-events: none; padding: 0; }
#wchat-overlay .chat-backdrop { display: none; } /* niente velo: dock flottante, pagina cliccabile */
#wchat-overlay .chat-sheet {
pointer-events: auto; position: relative; width: 400px; max-width: 400px;
/* Tetto legato all'header: chat + le due card sopra non devono mai salire sulla topbar
(prima 82vh: con le card aggiunte sfondava sulle finestre basse). */
height: var(--wchat-h, 460px); max-height: calc(100dvh - 240px); min-height: 0; margin: 0;
border: 1px solid var(--bronze-d); border-top: 2px solid var(--bronze); border-bottom: none;
border-radius: 12px 12px 0 0; box-shadow: 0 -10px 34px rgba(0,0,0,.55), inset 0 1px 0 var(--edge-hi);
/* NIENTE `sheetUp` SUL DOCK (15/08/2026, segnalato dal committente). Su mobile la chat E' un
foglio che sale dal basso e l'animazione racconta il gesto; da desktop e' un pannello
AGGANCIATO in basso a destra, e li' quell'animazione non racconta niente — anzi mente.
Si riaccendeva a ogni ricostruzione del nodo: aprivi un popup a schermo intero, lo
chiudevi, e il dock GIA' APERTO risaliva da sotto come se lo stessi aprendo adesso.
Un'animazione d'ingresso su una cosa che non sta entrando e' rumore. Il dock ha gia' la
sua transizione vera, quella del collasso (`.wchat-collapse`), che segue un gesto reale. */
padding-bottom: 0; animation: none;
/* Stesse sfumature vive del mobile: bagliore acciaio in alto → navy profondo.
(In guild-mode vince la regola granata, che ha specificità maggiore.) */
background:
radial-gradient(130% 40% at 50% -5%, rgba(46,78,116,.5), transparent 72%),
linear-gradient(180deg, #111a28 0%, #0e1520 46%, #0b111b 100%);
}
#wchat-overlay .chat-sheet::before, #wchat-overlay .chat-sheet::after { display: none; }
/* Composer del dock: input e invio SULLA STESSA RIGA (niente spazio morto). L'invio è un tondo
compatto con l'icona a freccia (paper-plane), non più il tasto "Invia" testuale. */
#wchat-overlay .chat-composer { flex-direction: row; align-items: stretch; gap: 8px; padding: 8px 10px; border-top: 1px solid rgba(195,156,95,.14); }
#wchat-overlay .chat-composer textarea { min-height: 34px; height: 34px; max-height: 84px; font-size: 13px; padding: 8px 10px; }
#wchat-overlay .chat-actions { flex: none; display: flex; align-items: stretch; }
/* Invio: stessa ALTEZZA dell'input e stessi colori (fondo scuro, bordo scuro, freccia ottone) —
niente blocco dorato acceso che stona accanto alla textbox. */
#wchat-overlay .wchat-send-btn { min-width: 0; min-height: 0; width: 34px; height: auto; align-self: stretch; padding: 0; border-radius: 8px; display: grid; place-items: center;
background: var(--sky-0); border: 1px solid #0b0f13; color: var(--brass-l); box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
#wchat-overlay .wchat-send-btn:hover { border-color: var(--brass); color: var(--brass); }
#wchat-overlay .wchat-send-ico { width: 12px; height: 12px; color: var(--brass-l); display: block; margin: auto; } /* glifo Enter: simmetrico, niente compensi ottici */
#wchat-overlay .wchat-send-btn:hover .wchat-send-ico { color: var(--brass); }
/* Chat di gilda (modale desktop): stesso tasto invio a icona Enter (testo nascosto), il resto
del layout resta invariato (pin + megafono + invio in fila). */
#chat-overlay .wchat-send-btn { min-width: 0; width: 42px; padding: 0; display: grid; place-items: center; }
#chat-overlay .wchat-send-txt { display: none; }
#chat-overlay .wchat-send-ico { display: block; width: 15px; height: 15px; color: var(--brass-l); margin: auto; }
#chat-overlay .wchat-send-btn:hover .wchat-send-ico { color: var(--brass); }
#wchat-overlay .wchat-send-txt { display: none; }
#wchat-overlay .wchat-send-ico { display: block; }
/* Header = maniglia di collasso: cursore a mano, chevron che ruota. Compatto (~metà altezza):
margini ridotti sopra/sotto, niente bordo inferiore, tasti più piccoli, titolo appena più piccolo. */
#wchat-overlay .chat-head { cursor: pointer; user-select: none; padding: 6px 8px 6px 12px; border-bottom: none; gap: 4px; }
#wchat-overlay .chat-title { font-size: 13px; letter-spacing: .4px; }
#wchat-overlay .chat-head .gi-chat { width: 15px; height: 15px; }
#wchat-overlay .chat-head .chat-x { width: 21px; height: 21px; font-size: 10px; border-radius: 4px;
display: grid; place-items: center; padding: 0; line-height: 1; }
#wchat-overlay .chat-head .wchat-closebtn { display: none; } /* da desktop niente ✕: si collassa (ribadito: la regola sopra ha specificità maggiore) */
#wchat-overlay .chat-head .wchat-bell svg { width: 11px; height: 11px; display: block; }
#wchat-overlay .wchat-collapse { line-height: 0; }
/* Tasto swap: doppia freccia ruotata 90°, compatta come le altre nell'header del dock. */
#wchat-overlay .chat-head .wchat-swap svg { width: 11px; height: 11px; }
#wchat-overlay .chat-head-btns { gap: 4px; }
#wchat-overlay .wchat-collapse { transition: transform .2s ease; }
/* Barra di resize sul bordo superiore (trascina su/giù per allungare/ridurre). */
#wchat-overlay .wchat-resize { display: block; position: absolute; top: 0; left: 0; right: 0;
height: 8px; cursor: ns-resize; z-index: 3; }
/* Collassata: solo l'header in basso a destra, stream e composer nascosti.
E VESTITA COME LA BARRA DI NAVIGAZIONE, perché è quello che diventa: un pezzo di footer
appoggiato alla stessa linea di terra, non un pannello rimasto a metà. Le differenze erano
tre, e nessuna era voluta a questa taglia:
· il bagliore acciaio in alto è tarato su un pannello alto 460 (copre il 40% dell'altezza).
Su una barra di 35 quel 40% sono quattordici pixel su trentacinque: metà barra lavata di
azzurro, ed è per questo che sembrava più chiara del footer invece che uguale;
· il filo superiore era 2px di bronzo CHIARO contro l'1px scuro del footer — a un centimetro
di distanza si leggevano due spessori diversi sulla stessa riga;
· l'ombra portata era quasi tripla (-10px/34 contro -4px/16), quindi la barra galleggiava
più in alto del suo vicino pur poggiando sullo stesso bordo.
Da espansa il pannello riprende tutto: lì il bagliore ha lo spazio per cui è nato. */
#wchat-overlay.collapsed .chat-sheet {
height: auto;
border-top: 1px solid var(--bronze-d);
box-shadow: 0 -4px 16px rgba(0,0,0,.45), inset 0 1px 0 var(--edge-hi);
background: linear-gradient(180deg, #1d2a3b, #121a27);
}
/* ...ma la TINTA continua a dire quale chat è: commutata su gilda resta brace, come il
pannello aperto e come il cielo della tab. Stessa scocca del footer, livrea diversa —
e gli stessi due salti di chiarezza del navy, così le due barre pesano uguale. */
#wchat-overlay.collapsed.guild-mode .chat-sheet {
background: linear-gradient(180deg, #452118, #2d1412);
}
/* Stessa altezza del footer: due barre sulla stessa riga che finiscono a quote diverse si
leggono come un gradino, non come una fascia. In più la maniglia di collasso diventa un
bersaglio pieno invece di una striscia. */
/* -1px: il foglio somma il suo border-top FUORI dal min-height (height:auto), il footer invece
conta il bordo DENTRO i suoi nav-h. Senza il pareggio la barra chat finiva 1px più alta e la
linea di terra faceva un gradino (segnalato da screenshot 08/08). */
#wchat-overlay.collapsed .chat-head { min-height: calc(var(--nav-h) - 1px); box-sizing: border-box; }
/* Da collassata è un pezzo di footer, e si veste da footer anche nei caratteri: scritta
compatta maiuscola come le label della navbar (loro 10px, qui 11 perché è sola), icona
poco sopra il testo invece del pallone gonfio, e tutto nell'oro del tema — niente
grigi di servizio sui tastini a fianco. */
/* E lo stesso filo d'ottone del footer: 2px sfumati che si accendono al centro (.bottomnav::before).
Il ::after è libero (quello di .chat-sheet è spento sopra) e va riacceso qui. */
#wchat-overlay.collapsed .chat-sheet::after {
content: ""; display: block; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
background: linear-gradient(90deg, transparent, var(--brass) 15%, var(--brass-l) 50%, var(--brass) 85%, transparent); opacity: .5;
}
#wchat-overlay.collapsed .chat-title { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
/* Niente fianchi, né da collassata né da aperta: è un pezzo di footer, e il footer non ha
bordi laterali (esteso alla versione aperta su richiesta 08/08). */
#wchat-overlay .chat-sheet, #wchat-overlay.collapsed .chat-sheet { border-left: none; border-right: none; }
/* Le CALAMITE sopra il dock: Storico e Classifiche, vestite come chat e footer (navy, filo
bronzo, small-caps). Stanno nell'overlay prima del foglio → si muovono con lui. */
/* Larghezza AGGANCIATA a quella della chat (400px), con la sicura anti-overflow sulle
finestre strette: mai più larghe dello schermo meno i margini del dock. */
#wchat-overlay .wdock-cards { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px;
pointer-events: auto; width: 400px; max-width: calc(100vw - 40px); }
/* CALAMITA SOTTO L'HEADER: il blocco mappa resta dov'è nel DOM (stessi gestori, stessa
larghezza inline della colonna) — è solo FISSATO in alto; cresce verso il basso, quindi
sopra la topbar non può salire. top/left/width li aggiorna positionWchatDock. */
#wchat-overlay .wdock-mapcol { position: fixed; z-index: 50; top: 96px;
display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
/* Il mini-mappamondo: pannello QUADRATO largo quanto la chat, canvas dentro, comandi
sovrapposti agli angoli alti (mondi a sinistra, setacci a destra). */
/* TETTO SOTTO L'HEADER: la colonna del dock cresce verso l'alto (è ancorata in basso) e su
finestre basse sfondava la topbar. Il quadrato è l'unico pezzo elastico: si accorcia lui —
100dvh meno topbar, card, barra chat e margini (~340px) — e il globo si adatta (usa il
lato minore). Sotto i 180px non scende: meglio un rettangolo basso che una fessura. */
#wdock-map { pointer-events: auto; position: relative; aspect-ratio: 1 / 1;
width: 100%; max-height: calc(100dvh - 340px); min-height: 180px;
overflow: hidden; background: linear-gradient(180deg, #0d1420, #080d15);
border: 1px solid var(--bronze-d); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
#wdock-map.hidden { display: none; }
.wdm-top { position: absolute; top: 6px; left: 8px; right: 8px; display: flex;
justify-content: space-between; z-index: 2; pointer-events: none; }
.wdm-worlds, .wdm-filters { display: flex; align-items: center; gap: 4px; pointer-events: auto; margin-left: auto; }
.wdm-worlds { margin-left: 0; margin-right: auto; }
.wdm-worlds.hidden, .wdm-filters.hidden { display: none; }
.wdm-wname { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
color: var(--brass-l); padding: 0 4px; background: rgba(13,19,27,.8); border: 1px solid var(--bronze-d);
border-radius: 4px; height: 24px; display: inline-flex; align-items: center; }
/* La stessa doppia freccia dello swap chat, ruotata orizzontale. */
.wdm-sw-ico { transform: rotate(90deg); display: block; }
/* Il tasto filtri del globo incassato si allinea alla riga alta dei comandi (world switch). */
#worldmap-overlay.wm-embed .wm-filt-btn { top: 6px; right: 8px; }
#worldmap-overlay.wm-embed .wm-filt-panel { top: 38px; }
.wdm-chip { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px;
background: rgba(13,19,27,.8); border: 1px solid var(--bronze-d); color: var(--ink-dim);
font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; }
.wdm-chip.on { color: var(--brass-l); border-color: var(--brass); }
.wdm-chip .gi { width: 13px; height: 13px; }
#wdm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#wdm-canvas:active { cursor: grabbing; }
.wdock-card { display: flex; align-items: center; justify-content: center; gap: 8px;
height: 41px; background: linear-gradient(180deg, #1d2a3b, #121a27);
border: 1px solid var(--bronze-d); border-radius: 12px; color: var(--ink-dim);
font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
font-family: var(--font-display);
cursor: pointer; box-shadow: 0 -4px 16px rgba(0,0,0,.35), inset 0 1px 0 var(--edge-hi); }
/* Medaglione ANCORATO A SINISTRA (assoluto: la scritta resta centrata sul tasto), più
grande, col glifo centrato nel disco (background-position esplicito: il vertical-align
da inline non vale nel flusso assoluto). */
.wdock-card { position: relative; }
.wdock-card .gi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; margin: 0; background-position: center; background-size: 60%; }
.wdock-card .wdock-lbl { line-height: 1; }
.wdock-card:hover, .wdock-card.on { color: var(--brass-l); border-color: var(--bronze); }
/* Il globo del medaglione diventa ROSSO quando la mappa è swappata sul Varco: il disco
d'ottone resta, il pianeta si ridipinge a maschera nel rosso del secondo mondo. */
.wdock-card.varco .gi-world { background-image: none; }
.wdock-card.varco .gi-world::after { content: ""; position: absolute; inset: 0;
background: var(--rust);
-webkit-mask: url("/assets/ui/world.svg?v=1") center / 60% no-repeat;
mask: url("/assets/ui/world.svg?v=1") center / 60% no-repeat; }
/* Il pannello classifiche sotto la calamita: stessa livrea del dock, scroll suo. */
#wchat-overlay .wdock-lb { pointer-events: auto; height: calc(100dvh - 380px); overflow: hidden;
display: flex; flex-direction: column;
background: linear-gradient(180deg, #131c29, #0d131c); border: 1px solid var(--bronze-d);
border-radius: 12px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
#wchat-overlay .wdock-lb.hidden { display: none; }
/* Niente card-nella-card: il pannello E' la card, il contenuto si stende a tutta altezza
e scrolla solo la lista. */
#wchat-overlay .wdock-lb > .card { background: none; border: none; box-shadow: none;
padding: 0; margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#wchat-overlay .wdock-lb .lb-scroll { flex: 1; min-height: 0; }
#wchat-overlay .wdock-lb .lb-scroll.scrolls { max-height: none; }
/* Le barre isola col mouse: mano che afferra, pugno mentre trascini. */
/* A schermo pieno (mappamondo, Storico, rapporti) il dock si toglie di mezzo: la sua
colonna (z 80) galleggiava SOPRA gli overlay (z 70). Regole separate: una lista unica
con :has() cadrebbe tutta insieme dove :has non c'è. */
body.wm-lock #wchat-overlay { display: none; }
body:has(#history-overlay:not(.hidden)) #wchat-overlay { display: none; }
/* …tranne quando il rapporto è STATO APERTO DALLA CHAT: lì il dock deve restare visibile
sotto il popup, se no si "esce" dalla conversazione proprio mentre la si sta facendo. */
body:has(#report-overlay:not(.hidden):not(.rep-onchat)) #wchat-overlay { display: none; }
body.wm-lock .wdock-left { display: none; }
body:has(#history-overlay:not(.hidden)) .wdock-left { display: none; }
body:has(#report-overlay:not(.hidden):not(.rep-onchat)) .wdock-left { display: none; }
.isl-switcher, .lb-tabs, .shop-sqrow { cursor: grab; }
.isl-switcher:active, .lb-tabs:active, .shop-sqrow:active { cursor: grabbing; }
#wchat-overlay.collapsed .chat-head .gi-chat { width: 13px; height: 13px; margin-right: 6px; }
#wchat-overlay.collapsed .chat-head .chat-x { color: var(--brass); }
#wchat-overlay.collapsed .chat-head .chat-x svg { color: var(--brass); }
#wchat-overlay.collapsed .chat-stream,
#wchat-overlay.collapsed .chat-composer,
#wchat-overlay.collapsed .wchat-resize { display: none; }
#wchat-overlay.collapsed .wchat-collapse { transform: rotate(180deg); }
/* Pallino "nuovi messaggi" sull'header del dock quando è collassato. */
#wchat-overlay .wchat-head-dot { position: absolute; top: 8px; left: 8px; width: 9px; height: 9px;
border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a5c, var(--rust) 60%, #8d2e1c);
border: 1.5px solid #2a0c06; display: none; }
#wchat-overlay.collapsed.has-unread .wchat-head-dot { display: block; }
}
/* PANORAMICA D'IMPERO FISSA nella colonna sinistra: solo desktop largo (≥1100), speculare
al dock destro. Testata come le calamite (non cliccabile), corpo che scrolla da solo. */
.wdock-left { display: none; }
@media (min-width: 1100px) {
.wdock-left { position: fixed; z-index: 40; bottom: 16px; display: flex;
flex-direction: column; gap: 8px; }
.wdock-left.hidden { display: none; }
/* Niente barra visibile: si scorre con la rotella, la colonna resta pulita. */
.wdock-left .wdock-left-body { flex: 1; min-height: 0; overflow-y: auto;
overflow-x: hidden; scrollbar-width: none; border-radius: 12px; }
.wdock-left .wdock-left-body::-webkit-scrollbar { display: none; }
.wdock-left .lr-pano { display: flex; flex-direction: column; gap: 8px; }
.wdock-left .lr-pano .card { margin: 0; }
/* Tessere navi a 6 per fila (la regola auto-fill da 86px ne farebbe 4 su ~400px). */
#views .wdock-left .bf-units { grid-template-columns: repeat(6, 1fr); }
}
/* Maniglia resize + chevron di collasso: solo da desktop (su mobile la chat è a schermo intero).
Il tasto SWAP globale⇄gilda invece c'è OVUNQUE: è utile anche su mobile/tablet. */
.wchat-resize, #wchat-overlay .wchat-head-dot, .wchat-collapse, .wdock-cards { display: none; }
.wchat-swap { display: grid; place-items: center; }
.wchat-swap svg { transform: rotate(90deg); }
/* In modalità GILDA la campanella (avvisi chat globale) sparisce ovunque: lì è inutile. */
#wchat-overlay.guild-mode .wchat-bell { display: none; }
@media (min-width: 900px) {
#wchat-overlay .wchat-collapse { display: grid; place-items: center; }
#wchat-overlay .wchat-closebtn { display: none; } /* da desktop non si "chiude": si collassa */
/* Da desktop il dock è sempre agganciato → il bottone chat nell'header è ridondante: via.
(stessa specificità della regola profile-mode che lo mostra, ma successiva → vince). */
.topbar.profile-mode #wchat-btn { display: none; }
/* Da desktop lo spazio avanza: la modale di gilda se lo prende (86 → 94vh, otto punti di
conversazione in più) e la testata torna a respirare. Su telefono e tablet resta bassa. */
#chat-overlay .chat-sheet { max-height: 94vh; }
#chat-overlay .chat-head { padding: 8px 16px; }
}
/* Meta della chat globale: stemma di gilda piccolo + [TAG] tra nome ed età del messaggio. */
.cm-gld { display: inline-flex; align-items: center; gap: 2px; }
.cm-gld .crestbadge { width: 14px; height: 14px; font-size: 10px; flex: none; }
.cm-gld .crestbadge .cricon { width: 9px; height: 9px; }
.cm-gtag { color: var(--brass-l); letter-spacing: .04em; }
/* Grab-handle brunito (gradiente d'ottone), come la tendina isole. */
.chat-sheet::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--bronze-d), var(--brass), var(--bronze-d)); opacity: .7; }
/* Cucitura d'ottone appena sotto il bordo superiore (stesso seam delle card/accordion e della tendina isole). */
.chat-sheet::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass-l) 50%, var(--brass) 78%, transparent); opacity: .5; pointer-events: none; }
/* Testata bassa di suo: su telefono e tablet la chat è a schermo intero e ogni pixel speso in
cornice è un messaggio in meno a video (il titolo occupava quasi trenta pixel di aria). Su
desktop, dove lo spazio avanza, la regola più sotto gliene ridà un po'. */
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; border-bottom: 1px solid rgba(195,156,95,.18); }
.chat-title { font-family: var(--font-display); letter-spacing: .6px; font-size: 14px; }
.chat-title b { color: var(--brass-l); }
/* .chat-x: forma dal canone del tasto a solo glifo, piu' su. */
.chat-head-btns { display: flex; align-items: center; gap: 8px; }
/* Campanella avvisi chat globale: attiva = piena; spenta = barrata + spenta. */
.wchat-bell { display: grid; place-items: center; padding: 0; }
.wchat-bell .wchat-bell-slash { display: none; }
.wchat-bell.off { color: var(--ink-dim); }
.wchat-bell.off .wchat-bell-slash { display: block; }
.chat-pinned { padding: 10px 12px 2px; display: flex; flex-direction: column; gap: 8px; max-height: 28vh; overflow-y: auto; }
.chat-directive { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--bronze-d); background: linear-gradient(180deg, rgba(233,181,74,.15), rgba(233,181,74,.04)); cursor: pointer; }
.chat-directive:hover { border-color: var(--brass); }
.cd-ico { flex: none; display: inline-flex; align-items: center; margin-top: 1px; }
.cd-ico .gi { width: 16px; height: 16px; }
.cd-txt { flex: 1; min-width: 0; }
.cd-remove { flex: none; font-size: 13px; line-height: 1; color: var(--ink-dim); padding: 2px 4px; margin: -2px -2px 0 0; background: none; border: 0; cursor: pointer; border-radius: 4px; }
.cd-remove:hover { color: var(--rust); background: rgba(195,75,48,.14); }
/* Testo troncato a 2 righe con "…"; card .expanded → testo intero. */
.cd-body { font-size: 13px; color: var(--ink); line-height: 1.4;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.chat-directive.expanded .cd-body { -webkit-line-clamp: unset; overflow: visible; }
.cd-meta { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
/* Tasto Bacheca nella testata chat (accanto alla ✕) */
.chat-board-btn { display: inline-flex; align-items: center; justify-content: center; }
.chat-board-btn .gi { width: 18px; height: 18px; }
/* .chat-head e' gia' dichiarata sopra: qui resta solo cio' che aggiunge davvero. */
.chat-head { gap: 8px; }
.chat-head .chat-title { margin-right: auto; }
/* ===== Assalti di gilda in volo: striscia sotto l'header chat + barre nel popup dossier =====
STESSO componente delle strip di Azioni/Unità (ps-group/ps-row: barra sottile, contatore,
chevron, coda a scomparsa) — qui si tara solo il COLORE: livrea acc-rosso già di casa
(riempimento ruggine), fondo velato del brace della chat. */
.chat-attacks { border-bottom: 1px solid rgba(195,156,95,.18); background: rgba(150,32,22,.14); }
/* Allineata ai 16px dell'header della chat (le strip di pagina stanno a 12). */
.chat-attacks .ps-toggle { padding: 4px 16px; }
.chat-attacks .ps-detail-pad { padding: 4px 16px; }
/* Nome → bersaglio nella riga: la strip di pagina non ne ha bisogno (lì parla l'icona), qui
il NOME è l'informazione — chi della ciurma sta volando, su chi. */
.ga-t { flex: 0 1 auto; min-width: 0; font-size: 11px; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le righe-volo dentro il popup del dossier (fra carta e piede): le STESSE righe-flotta della
Panoramica (fleetRow, accento acc-pvp → --acc ruggine su barra e punta), che si estendono su
flotta e potenza. Qui solo il respiro fra carta e righe. */
.ga-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* Niente rail rosso a sinistra: qui il rosso lo dice già la barra — il rail è il codice delle
card categoria della Panoramica, e in un popup di sole righe uguali non distingue niente. */
.ga-list .fleet-row-wrap { margin: 0; border-left: 1px solid #0c1116; }
/* E niente anello --acc quando la riga è aperta (in Panoramica segna QUALE riga hai aperto in
mezzo a venti; qui le righe sono due e il rosso attorno leggeva come un bordo sbagliato). */
.ga-list .fleet-row-wrap.open { box-shadow: inset 0 1px 0 var(--edge-hi); }
/* Il condividi in coda a ogni battaglia dello Storico: minimale, solo outline, ULTIMO
elemento dentro il corpo della card — così è chiaro a quale rapporto appartiene. */
.hist-share { margin: 12px 0 0; }
.hist-share .btn { width: 100%; }
/* Il registro dell'operazione: chi ha già colpito resta nel popup con la riga tinta
dell'esito — VELATURA verde o rossa (mai glow, mai rail) e il verdetto scritto dove i
voli vivi hanno il timer. Dentro l'espansa: superstiti coi badge perdite, e il bottino. */
.ga-list .fleet-row-wrap.ga-won { background: rgba(74,222,128,.06); }
.ga-list .fleet-row-wrap.ga-lost { background: rgba(180,36,58,.10); }
.ga-esito.ok { color: var(--good); }
.ga-esito.ko { color: var(--rust-l); }
/* Sul medaglione il volto dell'attaccante, alla stessa taglia del tondo (30px). */
.ga-list .fr-ico { overflow: hidden; }
.ga-list .fr-ico .av-img, .ga-list .fr-ico img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Il popup dal messaggio: il piede porta l'Attacca già puntato — niente barra di fondo, solo
il tasto a larghezza carta. E l'«Attacca con questa intel» DENTRO la carta si spegne: due
tasti per lo stesso gesto nello stesso popup sono uno di troppo. */
.report-overlay.rep-onchat .report-foot { border-top: none; background: none; padding: 10px 0 0; }
.report-overlay.rep-onchat .fr-recall { display: none; }
/* Bacheca: elenco avvisi (albo delle direttive) */
.board-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 130px; }
.board-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bronze-d); background: linear-gradient(180deg, rgba(233,181,74,.12), rgba(233,181,74,.03)); }
.board-item .bd-av { flex: none; }
.bd-main { flex: 1; min-width: 0; }
.bd-body { font-size: 13px; color: var(--ink); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.bd-meta { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.bd-remove { flex: none; font-size: 14px; line-height: 1; color: var(--ink-dim); background: none; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.bd-remove:hover { color: var(--rust); background: rgba(195,75,48,.14); }
.chat-stream { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 130px; }
/* Altri: bolla a sinistra, avatar a DESTRA (row-reverse). Miei: bolla a destra, avatar a
SINISTRA (row normale). Così l'icona sta sempre sul lato interno verso il centro. */
/* -webkit-touch-callout: la pressione lunga sul messaggio apre le reaction, non il menu di
sistema di iOS (che sarebbe uscito sopra il popup). Il testo resta selezionabile. */
.chat-msg { max-width: 86%; align-self: flex-start; display: flex; gap: 6px; align-items: flex-start; flex-direction: row-reverse; -webkit-touch-callout: none; }
.chat-msg.mine { align-self: flex-end; flex-direction: row; }
/* Avatar del capitano accanto alla bolla. */
.cm-av { flex: none; }
.cm-av.av-slot.av-sm { width: 36px; height: 36px; font-size: 18px; }
.chat-msg:not(.mine) .cm-av { cursor: pointer; }
.cm-main { min-width: 0; }
/* Stella del Generale di guerra: dorata, luminosa, allineata all'avatar (lato esterno). */
.gen-star { flex: none; align-self: flex-start; display: inline-flex; align-items: center; height: 26px; margin-top: 1px; }
.gen-star .gi { width: 15px; height: 15px; /* filter glow rimosso */ }
/* Coroncina oro del Fondatore in chat (come la stella del Generale, ma senza glow). */
.gen-crown { flex: none; align-self: flex-start; display: inline-flex; align-items: center; height: 36px; }
.gen-crown .gi { width: 22px; height: 22px; }
/* Medaglia dell'Ufficiale in chat (grado di gilda, accanto all'avatar come corona/stella). */
.gen-off { flex: none; align-self: flex-start; display: inline-flex; align-items: center; height: 36px; }
.gen-off .gi { width: 18px; height: 18px; }
/* Marker RICERCATO (taglia attiva): icona cliccabile accanto al grado, ovunque. Più grande e con
un contorno scuro + leggera schiaritura → ben visibile su qualsiasi sfondo (anche sull'oro del "tu"). */
.wanted-badge { display: inline-flex; align-items: center; cursor: pointer; vertical-align: -3px; margin-left: 2px; }
.wanted-badge .gi { width: 18px; height: 18px; filter: brightness(1.18) drop-shadow(0 0 1px rgba(0,0,0,.75)) drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.wanted-badge:hover .gi { filter: brightness(1.4) drop-shadow(0 0 1px rgba(0,0,0,.75)); }
.cm-wanted { flex: none; align-self: flex-start; margin-top: 2px; }
.cm-wanted .gi { width: 19px; height: 19px; }
.cm-nm { font-weight: 700; }
/* Nome colorato per ruolo in chat (Fondatore ambra, Ufficiale viola); membri = colore meta. */
.cm-bubble { padding: 8px 10px; border-radius: 12px; border-top-left-radius: 4px; font-size: 13px; line-height: 1.35; background: var(--panel-2); border: 1px solid #0c1116; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); word-break: break-word; }
.chat-msg.mine .cm-bubble { border-top-left-radius: 13px; border-top-right-radius: 4px; background: linear-gradient(180deg, var(--bronze), var(--bronze-d)); color: #241a0b; border-color: #5d4828; }
.cm-meta { font-size: 10px; color: var(--ink-dim); margin-top: 2px; padding: 0 4px;
display: flex; align-items: center; flex-wrap: wrap; gap: 4px; line-height: 1.1; }
.chat-msg.mine .cm-meta { justify-content: flex-end; }
.cm-flag { font-size: 10px; color: var(--amber-l); }
/* --- Coordinamento in chat (11/08/2026): quote, carte-rapporto, reaction, menzioni ---
Tutto su pezzi già in uso: velature scure, bordi bronzo, chip. Niente glow, niente rail. */
.cm-quote { padding: 4px 8px; margin-bottom: 6px; border-radius: 8px; background: rgba(0,0,0,.28);
color: var(--ink-dim); font-size: 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; max-width: 100%; }
.cm-quote b { color: var(--ink); }
.chat-msg.mine .cm-quote { background: rgba(0,0,0,.18); color: #241a0b; }
.chat-msg.mine .cm-quote b { color: #241a0b; }
/* La carta-rapporto in chat: VELATURA scura, non un pannello — la bolla la incornicia già,
un secondo bordo e un fondo pieno erano una scatola nella scatola (e il blu di plancia
dentro l'ottone stonava). Traslucida funziona su entrambi i lati: sulle bolle bronzo si
scurisce quanto basta a far leggere icone e numeri disegnati per il buio, su quelle scure
è un lieve incasso. Inchiostro chiaro sempre, niente varianti. */
/* Fondo a BRACE: rosso scuro che sfuma in nero, in diagonale — vetro fumé rosso, sempre
semitrasparente ma DECISO (la prima versione era slavata: troppo poco pigmento e il bronzo
della bolla la infangava). L'inchiostro chiaro ci sta sopra netto. */
/* TESTATA PIENA, CORPO VELATO — come le carte di rapporto grandi: la fascia col titolo tiene
il colore, sotto il fondo si alleggerisce e lascia respirare il brace della chat. Una carta
tutta opaca sembrava incollata sopra la conversazione invece che dentro. */
/* LA TAVOLOZZA DELLE CARTE IN CHAT (13/08/2026, ordine del committente): ogni genere la sua
fascia — battaglia rosso, spionaggio GIALLO come la rotta delle sonde sul mappamondo,
richieste azzurre, spedizioni personali e condivise la SCALA DELLE RARITÀ (ottone→verde→
blu→viola→arancio→rosso). Il CORPO invece è quello dei normali messaggi: pannello pieno,
bordo e filo di luce come `.cm-bubble` — una carta in mezzo alla conversazione deve sembrare
parte della conversazione. L'unica col corpo velato che sfuma nel fondale è la CACCIA
(`.rosso`, più sotto): quell'effetto particolare è il Mondo Rosso che filtra, ed è suo.
UNA RICETTA, N TAVOLOZZE: ogni variante imposta quattro proprietà — testo fascia (--rc-t),
i due fermi del gradiente (--rc-h1/--rc-h2) e il bordo (--rc-bd) — e la carta si monta da
sola. Le tinte sono OPACHE e sature-scure, scelte a mano: un rgba sopra il pannello scuro
desaturava tutto, e il blu usciva ardesia, il giallo senape spenta. Il bordo porta la STESSA
tinta scurita, così fascia e corpo sono un oggetto solo — bordi nel colore, mai aloni.
Geometria da bolla (raggio 12, spalla 4 dal lato del parlante): la carta È il messaggio. */
.cm-refcard { display: block; padding: 0 0 6px; margin-bottom: 4px;
--rc-t: var(--brass-l); --rc-h1: #5a2114; --rc-h2: #3d150c; --rc-bd: #401a10;
border-radius: 12px; border-top-left-radius: 4px;
overflow: hidden;
background: var(--panel-2); border: 1px solid var(--rc-bd);
color: var(--ink); cursor: pointer; }
.chat-msg.mine .cm-refcard { border-top-left-radius: 12px; border-top-right-radius: 4px; }
/* Bolla che contiene SOLO la carta: la bolla SPARISCE. Un dossier non è una battuta, non ha
bisogno del fumetto attorno — e la scocca d'ottone (o di plancia) attorno a una carta che ha
già fondo, raggio e forma propri era una cornice su una cornice. Resta la sola carta, che
nella colonna dei messaggi si distingue proprio perché NON è una bolla. */
.cm-bubble.has-ref { padding: 0; background: none; border: 0; box-shadow: none; }
.chat-msg.mine .cm-bubble.has-ref { background: none; border: 0; }
.cm-bubble.has-ref .cm-refcard { margin-bottom: 0; }
/* Riga-titolo: icona + etichetta in ottone, la stessa voce della testata del rapporto vero.
La chiamata alle armi si distingue dal colore del titolo (ruggine), non da un bordo. */
.cm-ref-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
color: var(--rc-t); letter-spacing: .02em;
/* La fascia del titolo resta PIENA e va da bordo a bordo: è l'unico appiglio opaco della
carta, e senza di lei il corpo non si leggeva più come un oggetto a sé. Il filo di luce
in alto è la targa d'ottone della plancia; sotto, l'ombra che la stacca dal corpo. */
padding: 6px 8px; margin-bottom: 2px;
background: linear-gradient(180deg, var(--rc-h1), var(--rc-h2));
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.4); }
/* CACCIA oltre il Varco: stessa scocca delle altre — bordo tinto, fascia rossa — ma il CORPO
resta ROSSO, solo OPACO: un pannello monocromo alla stessa luminanza del `--panel-2` delle
altre carte, virato ruggine. È il Mondo Rosso che filtra, senza più la trasparenza che si
perdeva nel fondale (provata e ritirata il 13/08/2026: rompeva la serie). */
.cm-refcard.rosso { --rc-t: var(--rust-l); background: #33201b; }
/* Glifo della fascia: a maschera (gi-tint) prende l'ORO del titolo, e un filo più piccolo
del passo di default — a 1.15em pesava quanto il testo, e la fascia s'era fatta alta. */
.cm-ref-h .gi { width: 12px; height: 12px; }
/* I compagni partiti su UNA riga: chi non ci sta finisce nei «…» — la lista intera, con le
barre dei voli, è dietro il tocco. Verde «dei nostri», icona compresa (currentColor). */
.cm-ref-r.cm-ref-atk { display: block; color: var(--good);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ref-atk .gi { width: 11px; height: 11px; vertical-align: -0.1em; }
.cm-refcard.rally .cm-ref-h { color: var(--rust-l); }
/* SPIONAGGIO non ancora trasformato in attacco: corpo GIALLASTRO (velatura ambrata, stessa
trasparenza) sotto la fascia che resta rossa — così l'intel si distingue al volo dalle
carte Attacco/Battaglia, tutte di brace pieno. */
/* La fascia GIALLA come la rotta delle sonde sul mappamondo (#e9c24a): il dossier era rosso
in testa come una battaglia, e in una colonna di carte rosse non lo trovavi. Quando qualcuno
parte la carta perde `.intel` e torna al rosso d'attacco, com'è giusto: si combatte. */
/* Oro AMBRATO, non oliva: la prima versione (#4d3d14) aveva poca saturazione e in colonna
virava al verdastro. Qui il gradiente è più caldo e più saturo — la rotta delle sonde è
d'oro, e d'oro deve leggersi anche la fascia. */
.cm-refcard.intel { --rc-t: #f2c94e; --rc-h1: #6b4a10; --rc-h2: #47300a; --rc-bd: #59400f; }
/* RICHIESTA alla ciurma: veste AZZURRINA — qui non si combatte, si dà una mano. */
.cm-refcard.req { --rc-t: #a9d3ea; --rc-h1: #1c4257; --rc-h2: #12303f; --rc-bd: #17384a; }
/* SPEDIZIONI (personali e condivise): fascia nel colore della RARITÀ — gli stessi accenti
delle card gexped in Gilda: ottone, poi verde blu viola arancio rosso. La rarità sta sulla
FASCIA (e sul bordo, via le proprietà), quindi la tavolozza si dichiara sulla carta. */
.cm-refcard.gexp.gexp-rar-0 { --rc-h1: #4e3b1c; --rc-h2: #362808; --rc-bd: #423114; }
.cm-refcard.gexp.gexp-rar-1 { --rc-t: #7fd4b3; --rc-h1: #1d5038; --rc-h2: #123826; --rc-bd: #1a4530; }
.cm-refcard.gexp.gexp-rar-2 { --rc-t: #86c4ec; --rc-h1: #1d4560; --rc-h2: #123043; --rc-bd: #1a3c52; }
.cm-refcard.gexp.gexp-rar-3 { --rc-t: #b7a2ff; --rc-h1: #382a66; --rc-h2: #251b47; --rc-bd: #302458; }
.cm-refcard.gexp.gexp-rar-4 { --rc-t: #f0b46c; --rc-h1: #5a3812; --rc-h2: #3f260b; --rc-bd: #4d300f; }
.cm-refcard.gexp.gexp-rar-5 { --rc-t: #f08a7c; --rc-h1: #5c221b; --rc-h2: #401511; --rc-bd: #4f1d16; }
/* Il contatore degli impegnati: niente spade davanti (la fascia ne ha già una nel titolo, e
due nella stessa riga leggevano come due cose diverse). Allineato al centro della fascia. */
.cm-ref-h .cm-ref-n { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--ink);
white-space: nowrap; display: flex; align-items: center; line-height: 1;
/* flex collassa lo spazio fra etichetta e countdown («parte tra1h») → il gap lo ridà */
gap: 4px; }
/* Il corpo si tiene la sua imbottitura: la carta non ne ha più, perché la fascia del titolo
deve arrivare a filo dei bordi. */
.cm-refcard > *:not(.cm-ref-h) { padding-left: 8px; padding-right: 8px; }
.cm-refcard .subtle { font-weight: 400; color: var(--ink-dim);
display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Lo stemma in chat va alla taglia della riga: 21px erano un bottone su un testo da 12. */
.cm-refcard .tgt-guild { margin-left: 0; font-size: 11px; }
/* Lo stemma alla taglia OTTICA del testo, non a quella nominale: a 14px un medaglione pieno
d'oro accanto a caratteri da 11-12 sporgeva sopra e sotto la riga e sembrava disallineato
anche quando i centri coincidevano. A 12 la riga torna una riga sola. */
.cm-refcard .tgt-guild .crestbadge, .cm-refcard .tgt-guild .gi { width: 12px; height: 12px; }
/* Nome e tag alla STESSA taglia: erano 12 e 11, e il gradino faceva leggere il tag come se
fosse appoggiato più in basso. */
.cm-refcard .subtle, .cm-refcard .tgt-guild, .cm-refcard .tgt-gtag { font-size: 11px; line-height: 1.4; }
/* Anteprima dei numeri dentro la carta di chat: le stesse `cost`/`stat` del rapporto grande,
rimpicciolite e su una riga che va a capo da sola. Peso normale: sono dati, non un titolo. */
.cm-ref-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-weight: 400; }
.cm-ref-r .cost, .cm-ref-r .stat { font-size: 11px; gap: 4px; }
.cm-ref-r .ricon { width: 11px; height: 11px; }
.cm-ref-r .gi { width: 11px; height: 11px; }
/* (nessuna variante "mine": la carta resta scura su entrambi i lati — vedi sopra) */
/* Reaction: UNA pastiglia ovale nella riga della firma (nome · ora · Rispondi), non più una
fila di chip sotto la bolla. Tutte le emoji ricevute dentro lo stesso tag e il totale a
destra quando sono più d'una — così un messaggio molto reagito occupa comunque una riga
sola. Fondo velato e bordo bronzo come i chip di prima: qui sotto c'è il brace della chat,
un fondo pieno ci finiva sopra come una toppa. */
.cm-react { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px;
border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid var(--bronze-d);
line-height: 1.6; vertical-align: -2px; }
/* Bordo in ottone se fra quelle reaction c'è la MIA: la stessa evidenza dei chip di prima. */
.cm-react.mia { border-color: var(--brass); background: rgba(233,181,74,.12); }
/* Ogni emoji nella SUA scatoletta centrata: i glifi della font emoji non hanno tutti le
stesse metriche (le spade siedono sulla linea di base, il pollice sporge sotto) e in fila
sulla baseline uno risultava più basso dell'altro. La scatola è PIÙ LARGA del glifo
(14px per un corpo 11px): su iOS la font emoji disegna ~un quinto oltre il corpo chiesto,
e nella scatola da 12px il pollice sbordava dalla pastiglia. Centratura SOLO geometrica
(flex): i vecchi ritocchi per-emoji tarati a occhio sul desktop spostavano i glifi fuori
mezzeria su ogni altra piattaforma — metriche diverse, correzione sbagliata. */
.cm-rx { display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; font-size: 11px; line-height: 1; }
.cm-react b { font-weight: 600; color: var(--ink); font-size: 10px; }
.cm-mention { color: var(--amber-l); font-weight: 700; }
.chat-msg.mine .cm-mention { color: #241a0b; text-decoration: underline; }
.cm-reply-btn { cursor: pointer; color: var(--ink-dim); }
.cm-reply-btn:hover { color: var(--ink); }
.chat-replybar { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
border-top: 1px solid rgba(195,156,95,.18); background: rgba(0,0,0,.28); font-size: 12px; color: var(--ink-dim); }
.chat-replybar .crb-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-replybar b { color: var(--ink); }
.chat-mentions { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px;
border-top: 1px solid rgba(195,156,95,.18); background: rgba(0,0,0,.28); }
.cm-emoji-bar { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* Bottone com'è, emoji PIÙ PICCOLA e centrata: a 18px riempiva tutto il tasto e la fila
sembrava una griglia di faccine, non una barra di scelta. Il grid la centra su tutti e due
gli assi — l'allineamento di riga del testo la spingeva in basso. */
.cm-emoji { font-size: 14px; min-width: 42px; display: grid; place-items: center; padding: 0; }
.cm-emoji.on { border-color: var(--brass); background: rgba(233,181,74,.12); }
/* Esito nella mini-carta: stessi colori dei verdetti dei rapporti (palette di plancia). */
.rv-win { color: var(--good); }
.rv-loss { color: var(--rust-l); }
.rv-draw { color: var(--ink-dim); }
.chat-composer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(195,156,95,.18); }
/* font-size 16px OBBLIGATORIO: sotto i 16px iOS Safari ZOOMA la pagina al focus del campo —
era metà del bug "riquadro nero sul compositore" segnalato da iPhone. */
.chat-composer textarea { width: 100%; box-sizing: border-box; resize: none; min-height: 42px; max-height: 100px; background: var(--sky-0); color: var(--ink); border: 1px solid #0b0f13; border-radius: 8px; padding: 10px 10px; font: inherit; font-size: 16px; box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
.chat-composer textarea:focus { outline: none; border-color: var(--brass); }
/* Actions row aligned under the text box: officer icon-buttons + Invia, same height */
.chat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Il menu delle richieste sta da SOLO a sinistra (margin-right auto), pin/megafono/invio a
destra. Stretto come il tasto-invio della chat (stesse misure e specificità: le regole
della veste gilda pesano di più di una classe sola); le tre linee sono DISEGNATE e in
ottone — il glifo ☰ non c'è in tutte le font e usciva un rettangolo muto. */
#chat-overlay .chat-actions .chat-req-btn, #wchat-overlay .chat-actions .chat-req-btn {
margin-right: auto; width: 40px; min-width: 0; flex: none; padding: 0;
display: grid; place-items: center; }
.req-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 16px; }
.req-burger i { display: block; height: 2px; border-radius: 999px; background: var(--brass-l); }
/* Le risposte nel popup della richiesta: nome + chip CENTRATI sulla stessa riga flex. */
.req-resp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Il selettore d'isola del form richieste: una riga per isola, TINTA del suo colore identità
(--ric da _islPalColor: madre blu, colonie la loro palette) — velatura e bordo nel colore,
mai glow. Il colore fa da secondo nome: si vede al volo DOVE si sta chiedendo. */
.req-isles { display: flex; flex-direction: column; gap: 6px; }
.req-isl { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
border-radius: 8px; text-align: left; cursor: pointer; font-size: 13px; color: var(--ink);
background: color-mix(in srgb, var(--ric, #5b87c9) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--ric, #5b87c9) 35%, #0c1116); }
.req-isl.on { border-color: var(--ric, #5b87c9);
background: color-mix(in srgb, var(--ric, #5b87c9) 18%, transparent); }
.req-isl .req-isl-nm { font-weight: 600; }
.req-isl small { margin-left: auto; }
/* Il form della richiesta nel popup: etichette piccole sopra i campi, respiro fra i blocchi. */
.req-form .req-lbl { margin: 10px 0 4px; font-size: 11px; }
.req-form .req-lbl:first-child { margin-top: 0; }
.req-form .logi-res { margin-top: 6px; }
.chat-actions .btn { min-height: var(--btn-h-sm); height: var(--btn-h-sm); }
.chat-actions .btn-officer { width: 42px; padding: 0; flex: none; }
.chat-actions .btn-bronze { min-width: 72px; }
/* Tasto invio (chat globale + gilda) OVUNQUE: tondo compatto scuro con l'icona Enter, niente
più "Invia" testuale. Stessa resa su desktop, tablet e mobile (riflesso dallo stile desktop). */
.wchat-send-txt { display: none; }
.wchat-send-ico { display: block; width: 15px; height: 15px; color: var(--brass-l); margin: auto; }
.chat-actions .wchat-send-btn { min-width: 0; width: 44px; padding: 0; display: grid; place-items: center;
background: var(--sky-0); border: 1px solid #0b0f13; color: var(--brass-l); box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
.chat-actions .wchat-send-btn:hover { border-color: var(--brass); color: var(--brass); }
.wchat-send-btn:hover .wchat-send-ico { color: var(--brass); }
/* Chat di GILDA: stesso STILE dell'input della chat globale (fondo scuro come la textbox,
bordo scuro, contenuto ottone, ombra interna) — il LAYOUT resta quello (pin/megafono/Invia). */
#chat-overlay .chat-actions .btn {
background: var(--sky-0); border: 1px solid #0b0f13; color: var(--brass-l);
box-shadow: inset 0 2px 4px rgba(0,0,0,.45); text-shadow: none;
}
#chat-overlay .chat-actions .btn:hover { border-color: var(--brass); color: var(--brass); }
/* Pin + megafono: le due gi partono da fill diversi (pin oro, megafono nero) → normalizzo a nero
e ritinto in OTTONE CHIARO come l'icona Enter, così i tre tasti hanno lo stesso colore. */
/* Colore UNIFORME per tutte e tre le icone (pin/megafono/invio): stesso ottone chiaro pallido
di --brass-l, niente glow né tinte accese diverse tra loro. */
#chat-overlay .chat-actions .btn-officer .gi {
filter: brightness(0) saturate(100%) invert(87%) sepia(18%) saturate(420%) hue-rotate(356deg) brightness(99%) contrast(90%);
opacity: 1;
}
#chat-overlay .chat-actions .btn-officer:hover .gi { filter: brightness(0) saturate(100%) invert(87%) sepia(18%) saturate(420%) hue-rotate(356deg) brightness(99%) contrast(90%); }
/* Icona bacheca (scroll) nell'header della chat di gilda: ORO come la nuvoletta del titolo
accanto — stessa ricetta di filtro delle azioni ufficiale qui sopra, non un secondo giallo.
La ✕ resta bianca: è chiusura, non un'azione di gilda. */
#chat-overlay .chat-head .chat-x .gi {
filter: brightness(0) saturate(100%) invert(87%) sepia(18%) saturate(420%) hue-rotate(356deg) brightness(99%) contrast(90%);
opacity: 1;
}
/* Officer actions (Fissa direttiva / Comunicato): gold OUTLINE only (no fill), yellow icon */
.btn-officer { background: transparent; color: var(--amber); border: 1.5px solid var(--amber); box-shadow: none; }
.btn-officer:hover { background: rgba(233,181,74,.12); }
.btn-officer .gi { width: 20px; height: 20px; filter: none; opacity: 1; }
/* Donate control (Skill Tree treasury) */
.don-field { min-height: 38px; background: var(--sky-0); color: var(--ink); border: 1px solid #0b0f13; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
.don-field#don-res { flex: 0 0 auto; }
/* Freccia del