:root {
    --bg-color: #2b7a4b; 
    --card-w: 70px; 
    --card-h: 100px;
}

@media (min-width: 768px) {
    :root { --card-w: 90px; --card-h: 130px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body, html { width: 100%; height: 100%; background-color: var(--bg-color); font-family: 'Segoe UI', Tahoma, sans-serif; overflow: hidden; }
.hidden { display: none !important; }

/* LOBBY STYLES */
#lobby-screen, #waiting-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, #1a4d2e, #0f2c1a);
    display: flex; justify-content: center; align-items: center; z-index: 2000;
}
.lobby-box {
    background: white; padding: 30px; border-radius: 12px;
    text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; gap: 15px; width: 95%; max-width: 500px;
}
.lobby-box h1 { color: #2b7a4b; margin-bottom: 5px; }
.lobby-box input, .lobby-box select { padding: 10px; font-size: 1rem; border: 2px solid #ccc; border-radius: 8px; text-align: center; font-weight: bold; width: 100%;}
.lobby-box button { padding: 12px; font-size: 1.1rem; background: #2b7a4b; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.2s; width: 100%;}
.lobby-box button:hover { background: #1a4d2e; }
#lobby-error { color: red; font-weight: bold; min-height: 20px; }

.lobby-tabs { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-top: 10px; }
.tab-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tab-divider { font-weight: bold; color: #888; }
.tab-col h3 { font-size: 1.1rem; color: #555; margin-bottom: 5px; }

#players-list-waiting { text-align: left; background: #eee; padding: 15px; border-radius: 8px; max-height: 200px; overflow-y: auto;}
#players-list-waiting div { padding: 5px 0; border-bottom: 1px solid #ccc; font-weight: bold; }

/* GRA */
#game-board { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 10px 20px 20px; }

#opponents-bar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 12px;
}
.opponent-badge {
    background: rgba(255,255,255,0.9); padding: 8px 15px; border-radius: 20px; font-weight: bold;
    display: flex; flex-direction: column; align-items: center; font-size: 0.9rem; border: 2px solid transparent; transition: 0.3s;
}
.opponent-badge.is-turn { border-color: #ffeb3b; background: #fffde7; transform: scale(1.1); box-shadow: 0 0 15px #ffeb3b; }
.opponent-badge.is-me { background: #e3f2fd; }

.hand { position: relative; width: 100%; max-width: 700px; margin: 0 auto; min-height: var(--card-h); }
#center-zone { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
#pile-zone { width: calc(var(--card-w) + 80px); height: var(--card-h); border: 2px dashed rgba(255, 255, 255, 0.2); border-radius: 8px; position: relative; }

.card { width: var(--card-w); height: var(--card-h); background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); position: relative; font-weight: bold; transition: left 0.35s cubic-bezier(0.25, 1, 0.5, 1), top 0.3s ease, transform 0.2s, box-shadow 0.2s, opacity 0.3s ease; touch-action: none; }
.card.red { color: #eb3b5a; }
.card.black { color: #2d3436; }
.card-corner { position: absolute; display: flex; flex-direction: column; align-items: center; font-size: 1rem; line-height: 1.1; }
.card-corner.top-left { top: 6px; left: 6px; }
.card-corner.bottom-right { bottom: 6px; right: 6px; transform: rotate(180deg); }
.card-corner .symbol { font-size: 0.85em; }
.card-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; }

.card.draggable { cursor: grab; border: 2px solid #ffeb3b; }
@media (hover: hover) { .card.draggable:hover { transform: translateY(-15px) !important; box-shadow: 0 10px 15px rgba(0,0,0,0.5); } }
.pile-card { position: absolute; top: 0; left: 0; transition: left 0.3s ease, top 0.3s ease, transform 0.3s ease; }

#draw-btn { margin-top: 20px; padding: 10px 20px; font-size: 1rem; border-radius: 8px; border: none; background: #ffeb3b; color: #333; cursor: pointer; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
#draw-btn:active { transform: scale(0.95); }
#draw-btn.disabled { opacity: 0.5; pointer-events: none; background: #ccc; }

#message-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: white; display: flex; text-align: center; justify-content: center; align-items: center; z-index: 100; font-size: 2rem; }

#opponents-hands-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    transform: scale(0.65);
    transform-origin: top center;
    margin-bottom: -30px; 
}
.opponent-visual-hand {
    flex: 1;
    display: flex;
    justify-content: center;
}
.card-count-badge {
    background: #333; color: #ffeb3b; 
    border-radius: 12px; padding: 2px 8px; 
    font-size: 0.9rem; font-weight: bold;
    margin-top: 4px; border: 1px solid rgba(255,255,255,0.2);
}
.opponent-badge.has-won {
    opacity: 0.6; filter: grayscale(1);
}
.winner-text {
    color: #e67e22; font-weight: 900; font-size: 0.9rem; margin-top: 4px;
}
#message-text { font-size: 1.5rem; line-height: 1.4; }

/* CIEMNY MOTYW */
body.dark-theme {
    background-color: #121212;
    color: #e0e0e0;
}
body.dark-theme .card {
    background-color: #181a1b;
    color: #e0e0e0;
    border-color: #333;
}
body.dark-theme .card.red { color: #ff6b81; }
body.dark-theme .card.black { color: #cdd6f4; }
body.dark-theme #lobby-screen,
body.dark-theme #waiting-screen {
    background: radial-gradient(circle, #1a1a2e, #0d0d1a);
}
body.dark-theme .lobby-box {
    background-color: #1e1e1e;
    color: #e0e0e0;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
body.dark-theme .lobby-box h1 { color: #4ade80; }
body.dark-theme .lobby-box input,
body.dark-theme .lobby-box select {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark-theme .lobby-box button { background: #2d6a4f; }
body.dark-theme .lobby-box button:hover { background: #1b4332; }
body.dark-theme #players-list-waiting {
    background: #2a2a2a;
    color: #e0e0e0;
}
body.dark-theme #players-list-waiting div { border-bottom-color: #444; }
body.dark-theme .tab-divider { color: #aaa; }
body.dark-theme .tab-col h3 { color: #aaa; }