/*
* NEOWEAVER — card.css
* Globalny styl kart (inspiracja: mody w Warframe).
*
* Struktura HTML karty (.nw-card):
*
*
*
← górna belka z kropkami
*
← ikona typu w rogu
*
![]()
*
*
*
Opis...
*
* Wymaga: Hacking 3
*
*
* Magic
*
*
*
============================================================ */
.nw-card__type-icon {
position: absolute;
top: 4px;
right: 6px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: var(--nw-type-icon-color, #94a3b8);
opacity: 0.85;
z-index: 5;
pointer-events: none;
}
.nw-card__type-icon svg,
.nw-card__type-icon i {
width: 14px !important;
height: 14px !important;
stroke-width: 2;
}
/* type icon colors */
.nw-card--magic .nw-card__type-icon { --nw-type-icon-color: var(--nw-type-magic); }
.nw-card--combat .nw-card__type-icon { --nw-type-icon-color: var(--nw-type-combat); }
.nw-card--action .nw-card__type-icon { --nw-type-icon-color: var(--nw-type-action); }
.nw-card--social .nw-card__type-icon { --nw-type-icon-color: var(--nw-type-social); }
.nw-card--equipment .nw-card__type-icon { --nw-type-icon-color: var(--nw-type-equipment); }
.nw-card--tech .nw-card__type-icon { --nw-type-icon-color: var(--nw-type-tech); }
/* ============================================================
IMAGE
============================================================ */
.nw-card > img,
.nw-card__image {
width: 100%;
height: 110px;
object-fit: cover;
display: block;
flex-shrink: 0;
/* subtelna maska — zanika ku dołowi */
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0));
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0));
}
/* ============================================================
HEADER
============================================================ */
.nw-card__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 4px;
padding: 6px 8px 2px;
/* offset: zostawiamy miejsce na type icon po prawej */
padding-right: 28px;
}
.nw-card__name {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #e2e8f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
line-height: 1.2;
}
.nw-card__level {
font-size: 0.62rem;
font-weight: 700;
color: var(--nw-card-accent, #8a9bb0);
letter-spacing: 0.06em;
flex-shrink: 0;
white-space: nowrap;
}
/* rarity dot (legacy — można zostawić lub usunąć) */
.nw-card__rarity-dot {
display: none;
}
/* ============================================================
BODY
============================================================ */
.nw-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 8px 8px;
}
.nw-card__desc {
font-size: 0.68rem;
color: rgba(200, 210, 220, 0.75);
line-height: 1.45;
margin: 0;
max-width: none;
/* max 3 linie */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================
REQUIREMENTS
Używaj:
Hacking 3
============================================================ */
.nw-card__requirements {
display: flex;
align-items: center;
gap: 5px;
margin-top: 4px;
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.45);
border-top: 1px solid rgba(255,255,255,0.07);
padding-top: 4px;
}
.nw-card__requirements svg,
.nw-card__requirements i {
width: 10px !important;
height: 10px !important;
flex-shrink: 0;
opacity: 0.6;
}
.nw-card__requirements span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ============================================================
TAGS
============================================================ */
.nw-card__tags {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: auto;
}
.nw-card__tag {
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 2px;
color: var(--nw-card-accent, #8a9bb0);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
}
/* ============================================================
DRAGGING STATE
============================================================ */
.nw-card[draggable="true"]:active {
opacity: 0.6;
transform: scale(0.97);
}
/* ============================================================
EMPTY STATE
============================================================ */
.nw-cards-empty {
grid-column: 1 / -1;
text-align: center;
padding: 2rem;
color: rgba(255,255,255,0.3);
font-family: var(--nw-card-font);
font-size: 0.75rem;
letter-spacing: 0.06em;
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
.nw-card,
.nw-card--legendary {
animation: none !important;
transition: none !important;
}
}
/* ============================================================
XP PROGRESS BAR
Generowany przez nw_render_card() — pełna szerokość w headerze,
pod nazwą karty, nad poziomem. Max XP = level × 10.
============================================================ */
.nw-card__xp-bar {
position: relative;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
/* header ma flex row — wyciągamy pasek do osobnej linii */
flex-basis: 100%;
order: 10; /* po nazwie i levelu, przed body */
margin: 2px 0 0;
cursor: default;
}
.nw-card__xp-fill {
height: 100%;
background: linear-gradient(
90deg,
var(--nw-card-accent, #adff00) 0%,
color-mix(in srgb, var(--nw-card-accent, #adff00) 60%, #fff) 100%
);
border-radius: 2px;
transition: width 0.4s ease;
box-shadow: 0 0 4px var(--nw-card-accent, #adff00);
}
.nw-card__xp-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.55rem;
font-family: var(--nw-card-font);
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.0); /* niewidoczny domyślnie */
transition: color 0.2s;
pointer-events: none;
white-space: nowrap;
}
/* przy hoverze na karcie — pokaż etykietę XP */
.nw-card:hover .nw-card__xp-label {
color: rgba(255, 255, 255, 0.85);
}
/* ============================================================
NOTES DLA DEVELOPERA
============================================================
1. ASCENSION DOTS — generuj w PHP za pomocą pętli:
$rank = (int)($card['ascension'] ?? 0);
$max = 5;
$dots = '';
for ($i = 0; $i < $max; $i++) {
$filled = $i < $rank ? ' nw-dot--filled' : '';
$dots .= "";
}
echo "{$dots}
";
2. TYPE ICON — mapa ikon Lucide wg kategorii:
$icon_map = [
'magic' => 'sparkles',
'combat' => 'sword',
'action' => 'zap',
'social' => 'users',
'equipment' => 'package',
'tech' => 'cpu',
];
$icon = $icon_map[$cat_key] ?? 'circle';
echo "
";
3. REQUIREMENTS — pole z bazy (kolumna 'requirements' w cyber_deck):
if (!empty($card['requirements'])) {
echo "";
echo "";
echo "" . esc_html($card['requirements']) . "";
echo "
";
}
4. XP BAR — generowany automatycznie przez nw_render_card().
Max XP = level × 10 (lvl 1 → 10 XP, lvl 2 → 20 XP).
Etykieta "X / Y XP" pojawia się przy hoverze na karcie.
5. Pamiętaj wywołać lucide.createIcons() po każdym renderowaniu kart przez AJAX.
============================================================ */