@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght=500;700&family=Poppins:wght=400;600;800&display=swap');
:root { --bg-color: #0f0c1b; --cat1-color: #8a2be2; --cat2-color: #ff1493; --cat3-color: #ff4500; --cat4-color: #d31313; --text-main: #ffffff; --sky-blue: #87CEEB; --neon-green: #39ff14; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
body { background: linear-gradient(135deg, #1f1a3a, #0f0c1b); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x: hidden; padding: 15px; position: relative; }

/* Commande audio flottante */
.audio-fab { position:fixed; left:calc(100vw - 59px); top:calc(18px + env(safe-area-inset-top)); z-index:10003; width:41px; height:41px; margin:0; padding:0; border-radius:50%; display:grid; place-items:center; touch-action:none; user-select:none; cursor:grab; }
.audio-fab.dragging { cursor:grabbing; transition:none!important; }
.audio-fab-dot { position:absolute; right:5px; bottom:5px; width:7px; height:7px; border-radius:50%; }

.game-logo-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10px; }
.game-logo-svg { width: 80px; height: 80px; filter: drop-shadow(0 0 8px var(--cat2-color)); animation: pulseGlow 2s ease-in-out infinite alternate; }
#splash-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle, #251f47 0%, #0f0c1b 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.8s ease, transform 0.8s ease; }
.splash-logo { font-size: 42px; font-weight: bold; text-transform: uppercase; letter-spacing: 4px; font-family: 'Orbitron', sans-serif; background: linear-gradient(45deg, #ff1493, #8a2be2, #ff4500); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 3s linear infinite, pulseGlow 2s ease-in-out infinite alternate; text-align: center; margin-bottom: 20px; }
.splash-loader { width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.1); border-radius: 50%; border-top-color: var(--cat2-color); animation: spin 1s ease-in-out infinite; }
.splash-signature { position: absolute; bottom: 25px; right: 25px; font-size: 11px; font-weight: 800; letter-spacing: 3px; color: rgba(255, 255, 255, 0.3); text-transform: uppercase; font-family: monospace; }

.screen { display: none; width: 100%; max-width: 500px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px rgba(255,255,255,0.1) solid; animation: fadeIn 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.screen.active { display: block; }
#screen-gameplay { max-width: 600px; width: 100%; }
h1 { text-align: center; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; background: linear-gradient(45deg, #ff1493, #8a2be2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 32px; }
.subtitle { text-align: center; font-size: 16px; margin-bottom: 25px; opacity: 0.8; color: #64ffda; font-style: italic; }
h2 { text-align: center; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1.5px; font-size: 20px; color: #ffffff; }
input[type="text"] { width: 100%; padding: 12px; border-radius: 10px; border: none; background: rgba(255,255,255,0.1); color: white; font-size: 16px; margin-bottom: 15px; outline: none; text-align: center; }
button { width: 100%; padding: 14px; border-radius: 10px; border: none; font-size: 16px; font-weight: bold; color: white; cursor: pointer; transition: transform 0.2s; margin-bottom: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
button:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(90deg, #8a2be2, #ff1493); }
.btn-secondary { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); }
.btn-v { background: #00cdac; }
.btn-a { background: #ff416c; }
.btn-danger { background: linear-gradient(90deg, #d31313, #a02c00); }
.btn-joker { background: linear-gradient(45deg, #ffd1ff, #fad0c4); color: #0f0c1b; display: none; margin-top: 10px; font-size: 14px; }
.btn-joker.available { display: block; animation: pulseGlow 1s ease-in-out infinite alternate; }

/* Écran de Fin & Score */
.podium-box { display: flex; flex-direction: column; align-items: center; gap: 15px; margin: 20px 0; padding: 20px; background: rgba(255, 255, 255, 0.03); border-radius: 15px; border: 1px solid rgba(255,255,255,0.08); }
.rank-row { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-radius: 10px; font-size: 16px; }
.rank-1st { background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 20, 147, 0.2)); border: 2px solid #ffd700; font-weight: bold; animation: pulseGlow 1.5s ease-in-out infinite alternate; }
.rank-2nd { background: rgba(255, 255, 255, 0.08); border-left: 4px solid #8a2be2; }
.trophy-icon { font-size: 24px; margin-right: 8px; }
#fireworks-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; display: none; }

.btn-fait, .btn-pas-fait, .btn-en-cours { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; }
.btn-fait { background: linear-gradient(90deg, #11998e, #38ef7d); box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4); }
.btn-fait:active { transform: scale(0.94); box-shadow: 0 0 22px rgba(56, 239, 125, 0.9); }
.btn-pas-fait { background: linear-gradient(90deg, #ff416c, #ff4b2b); box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4); }
.btn-pas-fait:active { transform: scale(0.94); box-shadow: 0 0 22px rgba(255, 65, 108, 0.9); }
.btn-en-cours { background: linear-gradient(90deg, #f7971e, #ffd200); color: #2a1d00; animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), tickPulse 1.2s ease-in-out infinite; }
.btn-en-cours:active { transform: scale(0.94); }
@keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tickPulse { 0%, 100% { box-shadow: 0 0 8px rgba(255, 210, 0, 0.5); } 50% { box-shadow: 0 0 18px rgba(255, 210, 0, 0.9); } }
#timer-circle-element.exec-mode circle { stroke: #ffd200 !important; }
#timer-circle-element.exec-mode .timer-display { color: #ffd200; }
.card.flash-success { animation: flashGreen 0.7s ease; }
.card.flash-fail { animation: flashRed 0.7s ease; }
@keyframes flashGreen { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 20px #38ef7d); } }
@keyframes flashRed { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 20px #ff416c); } }
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 15px; }
.cat-btn { padding: 15px; border-radius: 12px; border: none; color: white; font-weight: bold; font-size: 15px; cursor: pointer; text-align: left; position: relative; overflow: hidden; }
.cat-btn::after { content: '➔'; position: absolute; right: 15px; }
.c1 { background: linear-gradient(135deg, #4a157d, var(--cat1-color)); }
.c2 { background: linear-gradient(135deg, #9b0c54, var(--cat2-color)); }
.c3 { background: linear-gradient(135deg, #a02c00, var(--cat3-color)); }
.c4 { background: linear-gradient(135deg, #7c0b0b, var(--cat4-color)); }
.c-rand { background: linear-gradient(135deg, #333, #666); }
.timer-wrapper { width: 100%; display: none; flex-direction: column; align-items: center; margin: 15px 0; }
.timer-circle { position: relative; width: 80px; height: 80px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; border: 3px solid rgba(255,255,255,0.1); }
.timer-display { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: bold; color: #ffffff; z-index: 2; }
.timer-svg { position: absolute; top: -3px; left: -3px; width: 80px; height: 80px; transform: rotate(-90deg); }
.timer-svg circle { width: 80px; height: 80px; fill: transparent; stroke: var(--sky-blue); stroke-width: 4; stroke-dasharray: 226; stroke-dashoffset: 0; stroke-linecap: round; }
.timer-alert circle { stroke: var(--cat4-color) !important; }
.timer-alert .timer-display { color: var(--cat4-color); animation: blink 0.5s infinite; }
.penalty-box { display: none; background: rgba(211, 19, 19, 0.15); border: 1px solid var(--cat4-color); padding: 12px; border-radius: 12px; margin: 15px 0; text-align: center; animation: shake 0.5s ease-in-out; }
.penalty-title { color: var(--cat4-color); font-weight: bold; text-transform: uppercase; font-size: 13px; margin-bottom: 3px; }
.joker-indicator-wrapper { display: flex; justify-content: center; margin-bottom: 12px; }
.joker-card { width: 54px; height: 54px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); opacity: 0.35; filter: grayscale(1); transition: all 0.4s ease; }
.joker-card.lit { opacity: 1; filter: grayscale(0); background: linear-gradient(45deg, #ffd1ff, #fad0c4); border-color: var(--gold, #ffd700); box-shadow: 0 0 12px rgba(255, 215, 0, 0.7); animation: pulseGlow 1s ease-in-out infinite alternate; }
.card-container { perspective: 1000px; -webkit-perspective: 1000px; width: 100%; height: 320px; margin: 10px 0; position: relative; }
.card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.card.flipped { transform: rotateY(180deg); }

.card-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.4); }
.card-front { background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.05) 0deg 6deg, transparent 6deg 45deg) 0 0/30px 30px, repeating-conic-gradient(from 0deg, rgba(255,255,255,0.05) 0deg 6deg, transparent 6deg 45deg) 15px 15px/30px 30px, radial-gradient(circle at 50% 45%, rgba(138,43,226,0.35), transparent 65%), linear-gradient(135deg, #2e284f, #1a1533); border: none; box-shadow: 0 10px 25px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,20,147,0.25); position: relative; overflow: hidden; }
.card-front::before { content: ''; position: absolute; inset: 10px; border: 1.5px dashed rgba(255, 20, 147, 0.4); border-radius: 10px; pointer-events: none; background: radial-gradient(circle, rgba(255,215,0,0.55) 0%, transparent 70%) 0 0 / 16px 16px no-repeat, radial-gradient(circle, rgba(255,215,0,0.55) 0%, transparent 70%) 100% 0 / 16px 16px no-repeat, radial-gradient(circle, rgba(255,215,0,0.55) 0%, transparent 70%) 0 100% / 16px 16px no-repeat, radial-gradient(circle, rgba(255,215,0,0.55) 0%, transparent 70%) 100% 100% / 16px 16px no-repeat; background-position: -3px -3px, calc(100% + 3px) -3px, -3px calc(100% + 3px), calc(100% + 3px) calc(100% + 3px); }
.card-front::after { content: ''; position: absolute; top: -60%; left: -60%; width: 220%; height: 220%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.09) 50%, transparent 58%); animation: cardShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes cardShine { 0%, 100% { transform: translate(-15%, -15%) rotate(12deg); } 50% { transform: translate(15%, 15%) rotate(12deg); } }
.card-emblem { width: 50px; height: 50px; margin-bottom: 8px; filter: drop-shadow(0 0 10px var(--cat2-color)); animation: pulseGlow 2s ease-in-out infinite alternate; position: relative; z-index: 1; }
.card-front h3 { font-size: 19px; opacity: 0.9; letter-spacing: 0.5px; position: relative; z-index: 1; }
.card-front .card-info { z-index: 1; }
.card-back { transform: rotateY(180deg) translateZ(1px); -webkit-transform: rotateY(180deg) translateZ(1px); font-size: 18px; line-height: 1.6; font-weight: 500; }
.card-info { font-size: 11px; text-transform: uppercase; position: absolute; top: 15px; letter-spacing: 2px; opacity: 0.7; }

.choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.chat-popup { display: none; position: fixed; bottom: 100px; right: 20px; width: 330px; height: 420px; background: linear-gradient(180deg, #1a1533 0%, #0f0c1b 100%); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.7), 0 0 25px rgba(255, 20, 147, 0.15); z-index: 1000; flex-direction: column; overflow: hidden; animation: fadeIn 0.3s ease; }
.chat-header { background: linear-gradient(90deg, #8a2be2, #ff1493); color: #fff; padding: 14px 16px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.5px; }
.chat-header span:first-child { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.chat-close-btn { cursor:pointer; font-size: 20px; opacity: 0.8; transition: 0.2s; line-height: 1; }
.chat-close-btn:hover { opacity: 1; transform: scale(1.15); }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px 10px; font-size: 14px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.msg-row { display: flex; }
.msg-row.me { justify-content: flex-end; }
.msg-row.them { justify-content: flex-start; }
.msg-bubble { max-width: 75%; padding: 8px 13px; border-radius: 16px; line-height: 1.4; word-wrap: break-word; animation: popIn 0.25s ease; }
.msg-row.me .msg-bubble { background: linear-gradient(135deg, #ff1493, #8a2be2); color: #fff; border-bottom-right-radius: 4px; }
.msg-row.them .msg-bubble { background: rgba(255,255,255,0.1); color: #eee; border-bottom-left-radius: 4px; }
.msg-row.system .msg-bubble { background: transparent; color: var(--sky-blue); font-style: italic; font-size: 12px; text-align: center; margin: 0 auto; }
.emoji-bar { display: flex; gap: 6px; padding: 8px 10px 0 10px; overflow-x: auto; scrollbar-width: none; }
.emoji-bar::-webkit-scrollbar { display: none; }
.emoji-bar span { font-size: 20px; cursor: pointer; flex: 0 0 auto; transition: transform 0.15s ease; padding: 2px; }
.emoji-bar span:active { transform: scale(1.4); }
.chat-input-area { display: flex; gap: 8px; padding: 10px; background: rgba(255,255,255,0.04); align-items: center; }
.chat-input-area input { margin-bottom: 0; padding: 10px 14px; font-size: 14px; border-radius: 20px; background: rgba(255,255,255,0.08); }
.chat-input-area button { width: auto; margin-bottom: 0; padding: 10px 18px; border-radius: 20px; background: linear-gradient(90deg, #8a2be2, #ff1493); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(255, 20, 147, 0.4); }
.chat-input-area button:active { transform: scale(0.92); }
.chat-trigger { display: none; position: fixed; bottom: 20px; right: 20px; width: 62px; height: 62px; background: linear-gradient(135deg, #8a2be2, #ff1493); border-radius: 50%; box-shadow: 0 6px 20px rgba(255, 20, 147, 0.5); cursor: pointer; z-index: 999; align-items: center; justify-content: center; animation: chatFloat 2.4s ease-in-out infinite; }
.chat-trigger:active { transform: scale(0.9); }
.chat-trigger svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
@keyframes chatFloat { 0%, 100% { transform: translateY(0); box-shadow: 0 6px 20px rgba(255, 20, 147, 0.5); } 50% { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(138, 43, 226, 0.6); } }
.notification-dot { display: none; position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; background: #ff3b3b; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 0 8px rgba(255, 59, 59, 0.8); animation: pulseGlow 0.8s ease-in-out infinite alternate; }
.turn-indicator { text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #00cdac; }
.room-code-display { font-size: 24px; font-weight: bold; color: #ff1493; text-align: center; margin: 15px 0; letter-spacing: 4px; }
.status-msg { font-size: 14px; text-align: center; color: #64ffda; margin-bottom: 10px; font-style: italic; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes pulseGlow { 0% { transform: scale(0.96); filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.5)); } 100% { transform: scale(1.04); filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.8)); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }