dtlkzuk
This commit is contained in:
parent
74ad10c95e
commit
0e5164de23
@ -480,29 +480,31 @@ body {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0,0,0,0.85);
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Cinzel", serif;
|
||||
color: rgba(255,215,80,0.85);
|
||||
color: rgba(255, 215, 80, 0.85);
|
||||
font-size: 18px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
#connecting-overlay p {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
#connecting-overlay .spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255,215,80,0.2);
|
||||
border: 3px solid rgba(255, 215, 80, 0.2);
|
||||
border-top-color: #ffd750;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
@ -520,7 +522,9 @@ body {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #ffd750;
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7);
|
||||
text-shadow:
|
||||
0 1px 6px rgba(0, 0, 0, 0.9),
|
||||
0 0 12px rgba(0, 0, 0, 0.7);
|
||||
letter-spacing: 1px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
@ -606,7 +610,7 @@ body {
|
||||
|
||||
.tt-track {
|
||||
fill: none;
|
||||
stroke: rgba(255,255,255,0.1);
|
||||
stroke: rgba(255, 255, 255, 0.1);
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
@ -619,7 +623,9 @@ body {
|
||||
transform-origin: center;
|
||||
stroke-dasharray: 113.1; /* 2π×18 */
|
||||
stroke-dashoffset: 0;
|
||||
transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease;
|
||||
transition:
|
||||
stroke-dashoffset 0.9s linear,
|
||||
stroke 0.3s ease;
|
||||
}
|
||||
|
||||
#turn-timer-num {
|
||||
@ -628,13 +634,20 @@ body {
|
||||
font-size: calc(var(--s) * 13);
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.9);
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@keyframes tt-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(1.15); }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Karten-Stats Overlay – exakt wie Slotmaschine ── */
|
||||
@ -684,8 +697,8 @@ body {
|
||||
.cs-cd {
|
||||
position: absolute;
|
||||
bottom: calc(var(--s) * 7);
|
||||
right: calc(var(--s) * 2);
|
||||
width: calc(var(--s) * 18);
|
||||
right: calc(var(--s) * 2);
|
||||
width: calc(var(--s) * 18);
|
||||
height: calc(var(--s) * 18);
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
@ -706,13 +719,32 @@ body {
|
||||
border-color: rgba(255, 215, 80, 0.6);
|
||||
}
|
||||
|
||||
/* Hand-Slot: Karte ist drin → Hintergrund + Overlay entfernen */
|
||||
.hand-slot.hand-slot--filled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
.hand-slot.hand-slot--filled::before {
|
||||
display: none !important;
|
||||
}
|
||||
/* Karten-Bild immer über dem ::before pseudo-element */
|
||||
.hand-slot img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: calc(var(--s) * 9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hand-Slot: Karte ist spielbereit (CD = 0) */
|
||||
.hand-slot.hand-slot-ready {
|
||||
border-color: rgba(80, 220, 80, 0.9) !important;
|
||||
border-style: solid !important;
|
||||
box-shadow:
|
||||
0 0 calc(var(--s) * 18) rgba(60, 200, 60, 0.5),
|
||||
0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0,0,0,0.4);
|
||||
0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* CD-Badge wenn Karte spielbereit */
|
||||
@ -729,7 +761,11 @@ body {
|
||||
top: calc(var(--s) * 4);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, rgba(20,120,20,0.92), rgba(10,80,10,0.92));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(20, 120, 20, 0.92),
|
||||
rgba(10, 80, 10, 0.92)
|
||||
);
|
||||
border: 1px solid #60d060;
|
||||
border-radius: calc(var(--s) * 4);
|
||||
color: #a0ffa0;
|
||||
@ -741,7 +777,7 @@ body {
|
||||
pointer-events: none;
|
||||
z-index: 6;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Spielfeld-Sperre */
|
||||
@ -771,7 +807,7 @@ body {
|
||||
border: 1px solid rgba(255, 215, 80, 0.35);
|
||||
border-radius: 16px;
|
||||
padding: 32px 40px;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.8);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
|
||||
min-width: 260px;
|
||||
}
|
||||
#ready-timer-label {
|
||||
@ -791,7 +827,7 @@ body {
|
||||
}
|
||||
.timer-track {
|
||||
fill: none;
|
||||
stroke: rgba(255,255,255,0.1);
|
||||
stroke: rgba(255, 255, 255, 0.1);
|
||||
stroke-width: 6;
|
||||
}
|
||||
.timer-fill {
|
||||
@ -801,7 +837,9 @@ body {
|
||||
stroke-linecap: round;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease;
|
||||
transition:
|
||||
stroke-dashoffset 0.9s linear,
|
||||
stroke 0.3s ease;
|
||||
}
|
||||
#ready-timer-number {
|
||||
position: absolute;
|
||||
@ -809,12 +847,12 @@ body {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.8);
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
#ready-timer-sub {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -825,7 +863,7 @@ body {
|
||||
.ready-pip {
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
letter-spacing: 1px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
@ -835,8 +873,8 @@ body {
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Linke Zone (Slots 1–3): Gold/Amber für Spieler 1 */
|
||||
.board.my-side-left .card-row .card-slot:nth-child(-n+3),
|
||||
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3) {
|
||||
.board.my-side-left .card-row .card-slot:nth-child(-n + 3),
|
||||
.board.my-side-right .card-row .card-slot:nth-last-child(-n + 3) {
|
||||
border-color: rgba(200, 150, 42, 0.75);
|
||||
background: rgba(180, 120, 20, 0.18);
|
||||
box-shadow:
|
||||
@ -846,8 +884,8 @@ body {
|
||||
}
|
||||
|
||||
/* Hover auf eigener Zone: stärker leuchten */
|
||||
.board.my-side-left .card-row .card-slot:nth-child(-n+3):hover,
|
||||
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3):hover {
|
||||
.board.my-side-left .card-row .card-slot:nth-child(-n + 3):hover,
|
||||
.board.my-side-right .card-row .card-slot:nth-last-child(-n + 3):hover {
|
||||
border-color: rgba(240, 190, 60, 1);
|
||||
background: rgba(200, 140, 30, 0.28);
|
||||
box-shadow:
|
||||
@ -857,8 +895,8 @@ body {
|
||||
}
|
||||
|
||||
/* Zonen-Label oben im Slot (kleine Markierung) */
|
||||
.board.my-side-left .card-row .card-slot:nth-child(-n+3)::after,
|
||||
.board.my-side-right .card-row .card-slot:nth-last-child(-n+3)::after {
|
||||
.board.my-side-left .card-row .card-slot:nth-child(-n + 3)::after,
|
||||
.board.my-side-right .card-row .card-slot:nth-last-child(-n + 3)::after {
|
||||
content: "⚔";
|
||||
position: absolute;
|
||||
top: calc(var(--s) * 5);
|
||||
@ -868,16 +906,16 @@ body {
|
||||
}
|
||||
|
||||
/* Gegner-Zone: dezentes Blau/Lila – nicht bespielbar */
|
||||
.board.my-side-left .card-row .card-slot:nth-last-child(-n+3),
|
||||
.board.my-side-right .card-row .card-slot:nth-child(-n+3) {
|
||||
.board.my-side-left .card-row .card-slot:nth-last-child(-n + 3),
|
||||
.board.my-side-right .card-row .card-slot:nth-child(-n + 3) {
|
||||
border-color: rgba(80, 130, 200, 0.45);
|
||||
background: rgba(40, 80, 160, 0.10);
|
||||
background: rgba(40, 80, 160, 0.1);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.board.my-side-left .card-row .card-slot:nth-last-child(-n+3)::after,
|
||||
.board.my-side-right .card-row .card-slot:nth-child(-n+3)::after {
|
||||
.board.my-side-left .card-row .card-slot:nth-last-child(-n + 3)::after,
|
||||
.board.my-side-right .card-row .card-slot:nth-child(-n + 3)::after {
|
||||
content: "🛡";
|
||||
position: absolute;
|
||||
top: calc(var(--s) * 5);
|
||||
@ -916,8 +954,13 @@ body {
|
||||
}
|
||||
|
||||
@keyframes pulse-zone {
|
||||
0%, 100% { box-shadow: 0 0 8px rgba(240, 190, 60, 0.25); }
|
||||
50% { box-shadow: 0 0 22px rgba(240, 190, 60, 0.55); }
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 8px rgba(240, 190, 60, 0.25);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 22px rgba(240, 190, 60, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hand-Slot nicht draggable (kein Cursor-Feedback) */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user