.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; overflow: hidden; }
.sky { position: absolute; inset: 0; background: linear-gradient(#59b8ff 0%, #a9e2ff 55%, #fff1c9 100%); }
.hills { position: absolute; left: -10%; right: -10%; bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.h1 { height: 38%; background: #6fc46a; bottom: 8%; left: -30%; right: 30%; box-shadow: inset 0 8px 0 #86d97f; }
.h2 { height: 30%; background: #54ab5a; bottom: 0; left: 20%; right: -30%; box-shadow: inset 0 8px 0 #6cc873; }
.menu-card { position: relative; z-index: 2; width: min(92vw, 400px); padding: 22px 26px 24px; border-radius: 22px; background: rgba(24, 26, 44, 0.88); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 24px 50px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 10px; animation: pop 0.45s cubic-bezier(.2, 1.5, .4, 1); }
.menu-card.small { width: min(92vw, 380px); }
.menu-card.wide { width: min(94vw, 560px); }
.menu-card.scroll { max-height: 92vh; overflow-y: auto; }
.menu-card h2 { margin: 0; text-align: center; color: var(--yellow); letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); }
.menu-card h3 { margin: 8px 0 0; font-size: 16px; color: #cfe0ff; }
.menu-card h3 small { font-weight: normal; font-size: 12px; color: #9aa6c0; }
@keyframes pop { from { transform: scale(0.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.logo { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; font-size: clamp(34px, 8vw, 52px); line-height: 1; transform: rotate(-3deg); }
.logo span { color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); animation: bob 2.4s ease-in-out infinite; }
.logo span:nth-child(2) { color: #fff; animation-delay: 0.2s; font-size: 0.7em; align-self: center; }
.logo span:nth-child(3) { color: var(--orange); animation-delay: 0.4s; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(1.5deg); } }
.tagline { margin: 0; text-align: center; color: #cfd8ee; font-size: 14px; }
.field { width: 100%; padding: 10px 14px; font-size: 16px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); outline: none; text-align: center; }
.field:focus { box-shadow: 0 0 0 3px var(--blue); }
.field.code { font-size: 32px; letter-spacing: 12px; text-transform: uppercase; font-weight: 800; }
.btn { cursor: pointer; padding: 11px 18px; font-size: 17px; font-weight: 800; letter-spacing: 0.5px; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s, filter 0.15s; }
.btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#ffe36b, var(--yellow)); }
.btn.ghost { background: #c5cde0; }
.btn.mini { padding: 4px 12px; font-size: 13px; border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.btn.ready { background: linear-gradient(#8bf59a, var(--green)); }
.check { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: #cfd8ee; cursor: pointer; }
.room-code { text-align: center; font-size: 18px; color: #cfd8ee; }
.room-code b { font-size: 34px; letter-spacing: 6px; color: var(--yellow); text-shadow: 0 3px 0 var(--ink); margin: 0 8px; }
.players { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.players li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255, 255, 255, 0.08); border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.12); }
.players .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); flex: none; }
.players .nm { flex: 1; font-weight: 700; }
.players .st { font-size: 13px; padding: 2px 10px; border-radius: 99px; background: #5a5f78; }
.players .st.ok { background: #2f9e47; }
.players .host { color: var(--yellow); font-size: 12px; }
.setting { display: grid; grid-template-columns: 1fr 1.3fr 48px; align-items: center; gap: 10px; font-size: 14px; }
.setting select { grid-column: 2 / 4; padding: 4px; border-radius: 8px; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.keybind { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.keybind button { min-width: 84px; padding: 3px 8px; border-radius: 8px; border: 2px solid var(--ink); background: #e8edf8; font-weight: 700; cursor: pointer; font-size: 13px; }
.keybind button.listen { background: var(--yellow); animation: blink 0.7s infinite; }
@keyframes blink { 50% { filter: brightness(0.8); } }
.menu-train { position: absolute; left: 0; right: 0; bottom: 3%; height: 70px; pointer-events: none; z-index: 1; }
.menu-train .rail { position: absolute; left: 0; right: 0; bottom: 6px; height: 8px; background: #444; border-top: 3px solid #bbb; }
.mtrain { position: absolute; bottom: 8px; display: flex; font-size: 52px; animation: drive 14s linear infinite; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)); }
.mcar { transform: scaleX(-1); }
@keyframes drive { from { left: -320px; } to { left: 105%; } }
@media (max-height: 640px) { .menu-card { gap: 6px; padding: 14px 20px; } .btn { padding: 7px 14px; font-size: 15px; } .menu-train { display: none; } }

.mcar .svg-ic { width: 60px; height: 60px; }
.btn .svg-ic { width: 20px; height: 20px; }

.seg { display: flex; gap: 0; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.seg button { flex: 1; padding: 8px 6px; font-weight: 800; font-size: 14px; cursor: pointer; border: 0; background: #c5cde0; color: var(--ink); font-family: inherit; }
.seg button.on { background: linear-gradient(#8bf59a, var(--green)); }
.seg button + button { border-left: 3px solid var(--ink); }

/* ===== v2.3 : menu principal animé ===== */
#menu-bg { position: fixed; inset: 0; z-index: 8; display: block; }
#menu-bg.hidden { display: none; }
.menu-vignette { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(ellipse at 30% 50%, rgba(10,14,40,0.55), rgba(10,14,40,0) 60%); }
body.ingame .menu-vignette { display: none; }
.screen { background: transparent; }
.screen .sky, .menu-train { display: none; }
.screen.main { justify-content: flex-start; padding-left: clamp(18px, 6vw, 110px); }
.menu-left { position: relative; z-index: 3; width: min(92vw, 470px); display: flex; flex-direction: column; gap: 10px; transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -6px), 0); transition: transform 0.2s ease-out; }
.logo.big { display: block; transform: none; margin: 0; font-size: clamp(40px, min(9.5vw, 12.5vh), 104px); line-height: 0.92; letter-spacing: 2px; perspective: 600px; filter: drop-shadow(0 8px 0 rgba(0,0,0,0.35)); }
.logo.big .w1, .logo.big .w2, .logo.big .w3 { display: block; animation: none; text-shadow: none; }
.logo.big .w2, .logo.big .w3 { display: inline-block; }
.logo.big .w2 { font-size: 0.5em; letter-spacing: 6px; margin-right: 0.28em; vertical-align: 0.3em; }
.logo.big .ch { display: inline-block; opacity: 0; transform: translateY(-120%) rotate(-18deg) scale(0.4); animation: chIn 0.75s cubic-bezier(.2, 1.9, .35, 1) forwards, chIdle 3.2s ease-in-out infinite, chShine 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms + 150ms), calc(var(--i) * 140ms + 1.2s), calc(var(--i) * 110ms + 2.4s); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.logo.big .w1 .ch { color: var(--yellow); background: none; }
.logo.big .w2 .ch { color: #fff; -webkit-text-stroke-width: 3px; }
.logo.big .w3 .ch { color: var(--orange); }
@keyframes chIn { 0% { opacity: 0; transform: translateY(-120%) rotate(-18deg) scale(0.4); } 100% { opacity: 1; transform: none; } }
@keyframes chShine { 0%, 14%, 100% { filter: none; } 7% { filter: brightness(1.7) saturate(1.3) drop-shadow(0 0 12px rgba(255,255,255,0.9)); } }
@keyframes chIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(1.4deg); } }
.tag-rot { margin: 2px 0 6px 6px; min-height: 1.6em; font-weight: 800; font-size: 17px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.5); letter-spacing: 0.5px; }
.tag-rot span { display: inline-block; animation: tagIn 0.55s cubic-bezier(.2, 1.4, .4, 1) both; }
.tag-rot span.out { animation: tagOut 0.35s ease-in forwards; }
@keyframes tagIn { from { opacity: 0; transform: translateY(14px) skewX(-8deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tagOut { to { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
.menu-panel { position: relative; padding: 18px 20px 14px; border-radius: 22px; background: rgba(16, 20, 42, 0.8); border: 2px solid rgba(255,255,255,0.18); box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.2); display: flex; flex-direction: column; gap: 9px; animation: panelIn 0.9s 0.35s cubic-bezier(.2, 1.2, .3, 1) both; transform-style: preserve-3d; transform: perspective(900px) rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -4deg)); }
.menu-panel::before { content: ''; position: absolute; inset: -2px; border-radius: 24px; padding: 2px; background: conic-gradient(from var(--ang, 0deg), #ffd23f, #ff8a22, #ff5a5f, #6fe3ff, #ffd23f); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; animation: spinBorder 7s linear infinite; pointer-events: none; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --ang: 360deg; } }
@keyframes panelIn { from { opacity: 0; transform: perspective(900px) translateX(-60px) rotateY(18deg); } to { opacity: 1; } }
.menu-panel .field { background: rgba(255,255,255,0.95); }
.mi { opacity: 0; transform: translateX(-30px); animation: miIn 0.6s cubic-bezier(.2, 1.4, .4, 1) forwards; animation-delay: calc(var(--d) * 90ms + 0.9s); }
@keyframes miIn { to { opacity: 1; transform: none; } }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent); transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none; }
.btn:hover:not(:disabled)::after { left: 130%; }
.btn.big { font-size: 22px; padding: 14px 18px; letter-spacing: 1.5px; }
/* NB: l'animation de pulsation évite le scale pour rester cliquable de façon stable */
.btn.primary.big { animation: miIn 0.6s cubic-bezier(.2, 1.4, .4, 1) forwards, glowPulse 2.2s 1.6s ease-in-out infinite; animation-delay: 0.9s, 1.6s; box-shadow: 0 5px 0 var(--ink), 0 0 0 rgba(255,210,63,0.6); }
@keyframes glowPulse { 50% { box-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255,210,63,0.75); } }
.btn.primary.big .svg-ic { width: 22px; height: 22px; animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.tagline.rec { font-size: 12px; color: #ffd9a0; }
.menu-panel .tagline { color: #dfe7ff; }
.menu-panel .seg { box-shadow: 0 3px 0 var(--ink); }
.seg button { transition: background 0.2s, transform 0.12s; } .seg button:active { transform: scale(0.95); }
.screen:not(.main) .menu-card { background: rgba(20, 24, 48, 0.9); }
.screen:not(.hidden):not(.main) .menu-card { animation: cardSwing 0.6s cubic-bezier(.2, 1.4, .3, 1) both; transform-origin: 50% 100%; }
@keyframes cardSwing { from { opacity: 0; transform: perspective(900px) rotateX(-20deg) translateY(40px) scale(0.92); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .screen.main { justify-content: center; padding-left: 0; } .menu-left { align-items: stretch; } }
@media (max-height: 700px) { .logo.big { font-size: clamp(40px, 8vw, 68px); } .menu-panel { padding: 12px 16px 10px; gap: 6px; } .btn.big { padding: 9px 14px; font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .logo.big .ch, .mi, .menu-panel, .btn.primary.big, .menu-panel::before, .tag-rot span { animation: none !important; opacity: 1; transform: none; } }

/* ===== comptes ===== */
.acct-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px 6px 8px; border-radius: 16px; border: 3px solid var(--ink); background: linear-gradient(#34417a, #1f2750); color: #fff; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,0.2); transition: transform 0.12s, filter 0.15s; text-align: left; }
.acct-chip:hover { transform: translateY(-2px); filter: brightness(1.12); }
.acct-chip canvas { width: 34px; height: 38px; flex: none; }
.chip-id { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#chip-name { font-size: 17px; text-shadow: 0 2px 0 var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-xp { height: 8px; border-radius: 5px; border: 2px solid var(--ink); background: #0f1226; overflow: hidden; }
.chip-xp i { display: block; height: 100%; background: linear-gradient(#8fe9ff, #3a9bd9); }
.acct-chip b { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 0 8px; font-size: 13px; }
.chip-go { font-size: 11px; letter-spacing: 1px; color: #ffd23f; text-shadow: 0 1px 0 var(--ink); }
.acct-wrap { position: relative; z-index: 3; width: min(96vw, 860px); max-height: 94vh; display: flex; }
.acct-card { width: 100%; max-height: 94vh; overflow-y: auto; padding: 18px 22px 16px; border-radius: 22px; background: rgba(20, 24, 48, 0.94); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 24px 50px rgba(0,0,0,0.4); animation: cardSwing 0.5s cubic-bezier(.2,1.4,.3,1) both; }
.acct-auth { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.acct-auth h2 { margin: 0; text-align: center; color: var(--yellow); text-shadow: 0 3px 0 var(--ink); }
.acct-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acct-head canvas { background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0)); border-radius: 14px; width: 84px; height: 96px; }
.acct-id { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 5px; }
.acct-name { font-size: 24px; font-weight: 900; text-shadow: 0 3px 0 var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge { font-size: 10px; letter-spacing: 1px; padding: 2px 9px; border-radius: 99px; background: #5a5f78; border: 2px solid var(--ink); }
.badge.on { background: #2f9e47; }
.acct-lvl { display: flex; align-items: center; gap: 10px; }
.lv { background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; padding: 1px 10px; font-weight: 900; }
.xpbar { position: relative; flex: 1; height: 20px; border: 3px solid var(--ink); border-radius: 11px; background: #0f1226; overflow: hidden; }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#8fe9ff, #3a9bd9); }
.xpbar b { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 14px; text-shadow: 0 0 3px #000; }
.acct-cr { font-size: 15px; display: flex; align-items: center; gap: 6px; } .acct-cr .svg-ic { width: 22px; height: 22px; }
.acct-actions { display: flex; flex-direction: column; gap: 8px; }
.acct-tabs { display: flex; gap: 8px; margin: 14px 0 10px; }
.acct-tabs button { flex: 1; padding: 9px 6px; border-radius: 12px; border: 3px solid var(--ink); background: #3a4372; color: #fff; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.acct-tabs button.on { background: linear-gradient(#ffe36b, var(--yellow)); color: var(--ink); transform: translateY(-2px); }
.acct-body { min-height: 300px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: rgba(255,255,255,0.07); border: 2px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 24px; color: var(--yellow); text-shadow: 0 2px 0 var(--ink); }
.stat span { font-size: 11px; color: #b8c4e6; }
.custom { display: flex; gap: 18px; align-items: flex-start; }
.prev { flex: none; text-align: center; background: radial-gradient(circle at 50% 70%, rgba(255,255,255,0.12), rgba(0,0,0,0.25)); border: 3px solid var(--ink); border-radius: 18px; padding: 8px; }
.prev canvas { display: block; }
.prev-name { font-weight: 900; margin-top: 2px; text-shadow: 0 2px 0 var(--ink); }
.cos-lists { flex: 1; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.cos-sec h4 { margin: 0 0 4px; color: #cfe0ff; font-size: 13px; letter-spacing: 1px; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.cos { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px; border: 3px solid var(--ink); background: #2f3866; color: #fff; font: inherit; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.cos:hover:not(:disabled) { filter: brightness(1.2); }
.cos.eq { background: linear-gradient(#5a4a1a, #3a3010); box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--yellow); }
.cos.lock { opacity: 0.7; } .cos:disabled { opacity: 0.4; cursor: not-allowed; }
.cos .cn { font-weight: 800; font-size: 12px; text-align: center; line-height: 1.1; } .cos small { font-size: 10px; color: #b8c4e6; }
.cos .sw { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); }
.mup { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 2px dashed rgba(255,255,255,0.12); }
.mup .ic .svg-ic { width: 32px; height: 32px; } .mup .nm { font-weight: 900; } .mup .ds { font-size: 12px; color: #aab6d0; }
.mup .pips { display: flex; gap: 4px; margin-top: 3px; } .mup .pips i { width: 20px; height: 7px; border-radius: 4px; background: #3a4058; } .mup .pips i.on { background: var(--yellow); }
@media (max-width: 760px) { .custom { flex-direction: column; align-items: center; } .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.lvb { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 7px; padding: 0 6px; font-weight: 900; font-size: 11px; }
/* menu principal : tient dans 720 px de haut avec la carte de profil */
.menu-left { gap: 6px; }
.logo.big { font-size: clamp(40px, min(9vw, 10vh), 96px); }
.menu-panel { gap: 7px; padding: 14px 18px 12px; }
.tag-rot { margin: 0 0 2px 6px; }
.menu-panel .tagline { font-size: 13px; line-height: 1.25; }

/* ===== amis ===== */
.btn-row.three { grid-template-columns: 1fr 1fr 1fr; }
.btn-row.three .btn { padding-left: 6px; padding-right: 6px; font-size: 15px; }
.fr-badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: #ff5a5f; color: #fff; border: 2px solid var(--ink); font-size: 12px; animation: nudge 1.1s ease-in-out infinite; }
.fr-card { max-width: 640px; margin: 0 auto; }
.fr-head { display: flex; justify-content: space-between; align-items: center; } .fr-head h2 { margin: 0; color: var(--yellow); text-shadow: 0 3px 0 var(--ink); }
.fr-add { display: flex; gap: 8px; margin: 10px 0 2px; } .fr-add .field { text-align: left; }
.fr-card h4 { margin: 12px 0 4px; color: #cfe0ff; font-size: 12px; letter-spacing: 1.5px; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 5px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 2px solid rgba(255,255,255,0.1); }
.fr-nm { flex: 1; font-weight: 900; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fr-st { font-size: 12px; color: #b8c4e6; white-space: nowrap; }
.fr-btns { display: flex; gap: 6px; }
.fr-row .dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ink); flex: none; background: #666; }
.fr-row .dot.on { background: #4cd964; } .fr-row .dot.lobby { background: #ffd23f; } .fr-row .dot.play { background: #ff9f43; }
.fr-list { max-height: 42vh; overflow-y: auto; }
#invite { position: fixed; right: 18px; bottom: 18px; z-index: 60; padding: 12px 16px; border-radius: 16px; border: 3px solid var(--ink); background: linear-gradient(#34417a, #1f2750); box-shadow: 0 5px 0 var(--ink), 0 0 30px rgba(255, 210, 63, 0.4); font-weight: 900; max-width: 300px; animation: pop 0.4s cubic-bezier(.2,1.6,.4,1); }
#invite-txt { margin-bottom: 8px; }

/* Collection */
.coll-title { margin: 0; font-size: 30px; text-shadow: 0 3px 0 var(--ink); }
.coll-tabs { flex-wrap: wrap; } .coll-tabs button { display: flex; flex-direction: column; align-items: center; min-width: 104px; font-size: 13px; }
.coll-tabs small { font-size: 11px; opacity: 0.75; }
.coll-count { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #aab6d0; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ccard { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #2a3258; border: 3px solid var(--ink); }
.ccard .cic .svg-ic { width: 34px; height: 34px; } .ccard .cic .svg-ic.mono { color: var(--yellow); }
.ccard .cbody b { display: flex; align-items: center; gap: 6px; font-size: 15px; } .ccard .cbody em { font-style: normal; font-size: 10px; letter-spacing: 1px; background: #44305e; border-radius: 6px; padding: 1px 6px; margin-left: auto; }
.ccard .cbody p { margin: 3px 0 0; font-size: 12px; line-height: 1.3; }
.ccard .cbody p.good { color: #8bf59a; } .ccard .cbody p.bad { color: #ff9a9a; } .ccard .cbody p.dim, .dim { color: #aab6d0; }
.ccard .sw { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink); display: inline-block; }
.ccard.locked, .ccard.unseen { background: #1c2140; opacity: 0.8; } .ccard.locked .cic, .ccard.unseen .cic { opacity: 0.5; }
.unl-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.unl-list li { display: flex; align-items: center; gap: 8px; } .unl-list li span { margin-left: auto; color: #aab6d0; font-size: 12px; } .unl-list li.ok b { color: #8bf59a; }

/* demandes d'amis dans le menu principal */
.fr-requests { margin-top: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 210, 63, 0.12); border: 2px solid rgba(255, 210, 63, 0.5); animation: cardSwing 0.5s cubic-bezier(.2,1.4,.3,1) both; }
.fr-requests h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: 2px; color: #ffd23f; display: flex; align-items: center; gap: 6px; }
.frq { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-weight: 800; font-size: 14px; }
.frq .fr-btns { display: flex; gap: 6px; }

/* Mon train (compte) */
.tb-stage { margin: 8px 0 10px; border-radius: 16px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: #2a3a63; }
.tb-stage canvas { display: block; width: 100%; height: auto; }
.tb-panel { background: rgba(255,255,255,0.06); border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px; }
.tb-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tb-head .tic .svg-ic { width: 46px; height: 46px; } .tb-head h3 { margin: 0; font-size: 20px; } .tb-head h3 small { font-size: 12px; color: var(--yellow); margin-left: 6px; } .tb-head h3 small.lock { color: #ff9a9a; }
.tb-head p { margin: 2px 0 0; font-size: 13px; color: #aab6d0; } .tb-head > div:nth-child(2) { flex: 1; min-width: 200px; }
.tb-act .mv { display: flex; gap: 6px; flex-wrap: wrap; }
.tiers { display: grid; gap: 6px; margin-top: 10px; }
.tier { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: #232b4a; border: 2px solid var(--ink); opacity: 0.6; }
.tier.next { opacity: 1; border-color: var(--yellow); box-shadow: 0 0 14px rgba(255,210,63,.25); }
.tier.done { opacity: 1; background: #24453a; }
.tier .tn { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #3a4372; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 900; }
.tier.done .tn { background: #3fb36b; } .tier .tn .svg-ic { width: 16px; height: 16px; }
.tier .tx { flex: 1; display: flex; flex-direction: column; } .tier .tx b { font-size: 14px; } .tier .tx span { font-size: 12px; color: #c4cfe8; }
.tiers.ghost .tier { opacity: 0.45; }
.mup.locked { opacity: 0.8; }

/* train de l'hôte dans le salon */
.lobby-train { margin: 8px 0; padding: 8px 10px 10px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 3px solid var(--ink); }
.lobby-train h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: 2px; color: #aab6d0; }
.lobby-train canvas { display: block; width: 100%; height: auto; border-radius: 10px; border: 2px solid var(--ink); }
.players .give { margin-left: 8px; }
#lobby .menu-card.wide { width: min(94vw, 760px); }