/* Yass Online - Styles de base (sans frameworks) */
:root{
  --bg: #0f172a;
  --card: #111827;
  --muted: #9CA3AF;
  --text: #E5E7EB;
  --brand: #7C3AED;
  --brand-2:#06B6D4;
  --ok:#10B981;
  --warn:#F59E0B;
  --danger:#EF4444;
  --shadow: 0 6px 16px rgba(0,0,0,0.25);
  --radius: 12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(135deg,#0b1022,#121a33 60%,#0c1329);color:var(--text);font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{width: min(1100px, 96%);margin:0 auto;padding: 16px;}
.site-header{position:sticky;top:0;background:rgba(17,24,39,0.85);backdrop-filter: blur(10px);border-bottom:1px solid #1f2937;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{font-size:28px;filter: drop-shadow(0 2px 6px rgba(124,58,237,.6));}
.brand .title{font-size:20px;font-weight:700}
.main-nav{display:flex;align-items:center;gap:16px}
.main-nav .danger{color:var(--danger)}
.user-pill{padding:6px 10px;border-radius:999px;background:#1f2937;font-size:14px}
.site-footer{border-top:1px solid #1f2937;margin-top:40px}
.hero{padding:24px 0 8px}
.alert{padding:12px 14px;border-radius:10px;background:#111827;border:1px solid #1f2937;margin:12px 0}
.alert.info{border-color:#1f2937}
.grid-3{display:grid;grid-template-columns: repeat(3,1fr); gap:16px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{background:radial-gradient(1200px 400px at 0 -200px, rgba(124,58,237,.2), transparent), #0f152c;border:1px solid #1f2937;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card h2{margin-top:0}
.form label{display:block;margin:10px 0}
.form input{width:100%;padding:10px;border-radius:8px;border:1px solid #30384a;background:#0e1429;color:var(--text)}
button, .button{appearance:none;border:0;border-radius:10px;background:linear-gradient(135deg,var(--brand),#4f46e5);color:white;padding:10px 14px;font-weight:600;cursor:pointer;box-shadow: var(--shadow);}
button:hover, .button:hover{transform: translateY(-1px)}
button.danger, .button.danger{background:linear-gradient(135deg,#f43f5e,#ef4444)}
.muted{color:var(--muted);font-size:14px}

.lobby-header h1{margin-bottom:6px}
.tables-grid{display:grid;grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:1000px){.tables-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tables-grid{grid-template-columns:1fr}}
.table-card{background:#0f152c;border:1px solid #1f2937;border-radius:12px;padding:14px; box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.table-title{font-weight:700}
.table-status{color:var(--muted);font-size:14px}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}

.table-header{display:flex; align-items:center; justify-content:space-between; gap:10px}
.table-header h1{margin:8px 0}
.table-root{position:relative; display:grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr; gap:16px; margin:10px 0 20px}
.seat{background:#0f152c;border:1px solid #1f2937;border-radius:12px;padding:10px;min-height:100px; box-shadow:var(--shadow)}
.seat.me{grid-column:1/4}
.seat-top{grid-column:1/4}
.seat-left{grid-column:1/2; grid-row:2/3}
.seat-right{grid-column:3/4; grid-row:2/3}
.center{grid-column:2/3; grid-row:2/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px}
.seat-name{font-weight:600;margin-bottom:8px}
.seat-cards{display:flex; gap:8px; flex-wrap:wrap}
.seat-cards.vertical{flex-direction:column; align-items:flex-start}

.trick{display:grid; grid-template-columns:repeat(2, 120px); grid-template-rows:repeat(2, 160px); gap:10px}
.trick-slot{background:#0e1429;border:1px dashed #334155;border-radius:10px;display:flex; align-items:center; justify-content:center; font-size:22px;}

/* Cartes */
.cardx{width:110px;height:150px;border-radius:12px;border:1px solid #374151;background:#f9fafb;color:#111827;position:relative;box-shadow:0 3px 8px rgba(0,0,0,.25);cursor:default}
.cardx.small{width:70px;height:95px;font-size:12px}
.cardx.back{background:repeating-linear-gradient(45deg,#111827,#111827 8px,#1f2937 8px,#1f2937 16px);}
.cardx .rank{position:absolute; top:6px; left:8px; font-weight:700}
.cardx .suit{position:absolute; bottom:6px; right:8px; font-size:22px}
.cardx.heart .suit, .cardx.diamond .suit, .cardx.heart .rank, .cardx.diamond .rank{color:#dc2626}
.cardx.spade .suit, .cardx.club .suit{color:#111827}

.status-line{font-size:14px; color:var(--muted)}

/* Chat global flottant */
.global-chat{position:fixed; right:18px; bottom:18px; width: min(420px, 92vw); background:#0f152c; border:1px solid #1f2937; border-radius:14px; box-shadow:var(--shadow); overflow:hidden; z-index:50}
.chat-header{background:#111827; padding:10px 12px; font-weight:700; border-bottom:1px solid #1f2937}
.chat-body{max-height:220px; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.chat-line{display:flex; gap:8px; align-items:flex-start}
.chat-line .who{min-width:72px; color:var(--muted); font-size:12px}
.chat-line .msg{background:#0e1429; border:1px solid #1f2937; border-radius:10px; padding:8px 10px; line-height:1.2}
.chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid #1f2937}
.chat-input input{flex:1; padding:10px; border-radius:10px; border:1px solid #30384a; background:#0e1429; color:var(--text)}