* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #0d1117; color: #e6edf3; min-height: 100vh; }
button { padding: 8px 16px; font-size: 14px; border: none; border-radius: 6px; background: #238636; color: #fff; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.15); }
button:disabled { background: #21262d; color: #484f58; cursor: not-allowed; filter: none; }
input[type=text], input[type=number] { padding: 8px 12px; font-size: 14px; border: 1px solid #30363d; border-radius: 6px; background: #161b22; color: #e6edf3; outline: none; }
input:focus { border-color: #58a6ff; }

.screen { display: none; }
.screen.active { display: flex; flex-direction: column; }

/* Login */
#s-login { align-items: center; justify-content: center; min-height: 100vh; gap: 16px; }
#s-login h1 { font-size: 2.4em; letter-spacing: 3px; }
#s-login form { display: flex; gap: 8px; }

/* Lobby */
#s-lobby { padding: 20px; max-width: 640px; margin: 0 auto; width: 100%; gap: 16px; }
.lobby-hdr { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.lobby-hdr h2 { font-size: 1.4em; }
.user-info { color: #8b949e; font-size: 14px; }
.tbl-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid #30363d; border-radius: 8px; background: #161b22; }
.tbl-name { font-weight: 600; margin-bottom: 2px; }
.tbl-meta { font-size: 13px; color: #8b949e; }
.tbl-join { display: flex; gap: 6px; align-items: center; }
.tbl-join input { width: 80px; }

/* Game */
#s-game { min-height: 100vh; padding: 12px; gap: 10px; }
#g-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #161b22; border-radius: 8px; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.phase { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.phase-betting { background: #d29922; color: #000; }
.phase-playing { background: #238636; }
.phase-azi { background: #f85149; }
.phase-potAwarded { background: #a371f7; }

#g-opponents { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.opp { padding: 10px 14px; border: 2px solid #30363d; border-radius: 8px; text-align: center; min-width: 110px; background: #161b22; transition: border-color .2s, box-shadow .2s; }
.opp.acting { border-color: #d29922; box-shadow: 0 0 10px rgba(210, 153, 34, .3); }
.opp.offline { opacity: .5; }
.opp.empty { opacity: .25; }
.opp-name { font-weight: 600; margin-bottom: 3px; white-space: nowrap; font-size: 14px; }
.opp-stack { font-size: 13px; color: #8b949e; margin-bottom: 3px; }
.opp-cards { margin: 3px 0; }
.opp-tricks { font-size: 12px; color: #3fb950; }
.opp-dc { font-size: 11px; color: #f85149; }

#g-center { background: #1a5c28; border-radius: 16px; padding: 20px; text-align: center; margin: 0 auto; max-width: 460px; width: 100%; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pot { font-size: 1.2em; font-weight: 700; }
.trump { display: flex; align-items: center; gap: 6px; }
.bet-info { color: #d29922; font-size: 14px; }
.waiting { color: #8b949e; font-style: italic; }
.winner { color: #d29922; font-weight: 700; font-size: 1.1em; }
.azi-msg { color: #f85149; font-weight: 600; }
.turn-msg { font-size: 13px; color: #8b949e; }
.turn-you { color: #58a6ff; font-weight: 700; font-size: 15px; }

.trick { display: flex; gap: 14px; justify-content: center; margin-top: 6px; }
.trick-play { text-align: center; }
.trick-who { font-size: 11px; color: #ccc; margin-bottom: 3px; }

#g-hand { text-align: center; }
.hand-label { font-size: 13px; color: #8b949e; margin-bottom: 6px; }
.hand { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }

#g-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.act { padding: 10px 20px; font-size: 15px; }
.act-fold { background: #da3633; }
.act-check { background: #238636; }
.act-call { background: #1f6feb; }
.act-raise { background: #bd5d15; }
.raise-grp { display: flex; gap: 4px; align-items: center; }
.raise-grp input { width: 76px; }

#g-timer { text-align: center; font-size: 1.3em; font-weight: 700; min-height: 1.4em; }
#g-timer.urgent { color: #f85149; }

/* Cards */
.card { display: inline-block; padding: 5px 7px; background: #fff; border: 2px solid #bbb; border-radius: 4px; font-size: 16px; font-weight: 800; line-height: 1; cursor: default; user-select: none; transition: transform .12s, box-shadow .12s; }
.card.red { color: #c62828; }
.card.black { color: #212121; }
.card.playable { cursor: pointer; border-color: #3fb950; box-shadow: 0 0 8px rgba(63, 185, 80, .5); }
.card.playable:hover { transform: translateY(-4px); box-shadow: 0 2px 12px rgba(63, 185, 80, .7); }
.card-back { display: inline-block; width: 22px; height: 18px; background: linear-gradient(135deg, #1f6feb, #0d47a1); border: 1px solid #0d47a1; border-radius: 3px; margin: 0 1px; }

/* Toast */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #da3633; color: #fff; padding: 10px 24px; border-radius: 8px; font-size: 14px; z-index: 1000; animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }

/* Overlay */
#overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; z-index: 999; }
#overlay[hidden] { display: none; }
.overlay-text { color: #fff; font-size: 1.2em; animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .4; } }