@import "https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Lilita+One&family=Nunito:wght@600;700;800;900&display=swap";:root{--ink:#1d1626;--paper:#fffaf0;--paper-2:#fff0d6;--bg:#ffe3b3;--tangerine:#ff8a3d;--tangerine-d:#de5f15;--cherry:#ff4d6d;--cherry-d:#cf2449;--sky:#4cb8ff;--sky-d:#1f86d6;--mint:#3fd49b;--mint-d:#17a672;--grape:#9b6bff;--grape-d:#6c3fe0;--sun:#ffd13b;--sun-d:#e3a400;--stone:#b9a58b;--stone-d:#8c7658;--stroke:3.5px;--shadow:6px 6px 0 var(--ink);--spring:cubic-bezier(.34, 1.56, .64, 1);--snap:cubic-bezier(.2, .9, .3, 1);--f-logo:"Luckiest Guy", "Lilita One", system-ui, sans-serif;--f-title:"Lilita One", system-ui, sans-serif;--f-body:"Nunito", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{min-height:100vh;font-family:var(--f-body);color:var(--ink);background-color:var(--bg);background-image:radial-gradient(#1d162617 1.6px, transparent 1.8px), repeating-conic-gradient(from 0deg at 50% -8%, #ffffff4d 0 7deg, transparent 7deg 14deg);-webkit-font-smoothing:antialiased;background-repeat:repeat,no-repeat;background-size:18px 18px,100% 1000px;font-weight:700;overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:4px solid var(--sky);outline-offset:3px;border-radius:10px}.cel{background:var(--paper);border:var(--stroke) solid var(--ink);box-shadow:var(--shadow);border-radius:18px}.outline-text{color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}.btn{--c:var(--mint);--cd:var(--mint-d);border:var(--stroke) solid var(--ink);background:linear-gradient(180deg, var(--c) 0 58%, var(--cd) 58% 100%);color:#fff;min-height:52px;font-family:var(--f-title);letter-spacing:.02em;text-shadow:2px 2px 0 var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .12s var(--snap), box-shadow .12s var(--snap), filter .12s ease;white-space:nowrap;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:0 22px;font-size:1.2rem;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";pointer-events:none;background:#ffffffb8;border-radius:999px;width:26px;height:7px;position:absolute;top:5px;left:10px;transform:rotate(-6deg)}.btn:hover:not(:disabled){box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.btn:active:not(:disabled){box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.btn:disabled{filter:saturate(.5)brightness(.95);cursor:progress}.btn.sun{--c:var(--sun);--cd:var(--sun-d);color:var(--ink);text-shadow:2px 2px #fff}.btn.sky{--c:var(--sky);--cd:var(--sky-d)}.btn.cherry{--c:var(--cherry);--cd:var(--cherry-d)}.btn.ghost{--c:var(--paper);--cd:var(--paper-2);color:var(--ink);text-shadow:none}.btn.small{min-height:42px;padding:0 16px;font-size:1rem}.btn.big{min-height:64px;font-size:1.35rem}.btn.wide{width:100%}.pill{border:2.5px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:4px 12px;font-size:.86rem;font-weight:900;display:inline-flex}.pill.hot{background:#ffe0e6}.dot{border:2px solid var(--ink);background:var(--stone);border-radius:50%;flex-shrink:0;width:12px;height:12px}.dot.en-ligne{background:var(--mint)}.dot.reveil{background:var(--sun);animation:.9s ease-in-out infinite pulse}.dot.injoignable{background:var(--cherry)}@keyframes pulse{50%{transform:scale(1.35)}}.scene3d,.scene-wrap,.scene-fallback{width:100%;height:100%}.scene3d canvas{touch-action:pan-y}.scene-fallback{place-items:center;display:grid}.den-svg{filter:drop-shadow(6px 6px #1d162640);width:min(78%,340px);height:auto;overflow:visible}.den-eyes{transform-origin:50% 67%;transform-box:fill-box;animation:4.3s infinite blink}@keyframes blink{0%,93%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}.login{grid-template-columns:minmax(0,1.1fr) minmax(0,460px);align-items:center;gap:24px;max-width:1180px;min-height:100vh;margin:0 auto;padding:24px 20px;display:grid}.login-scene{height:min(70vh,560px)}.login-card{text-align:center;width:100%;padding:34px 30px 28px}.logo{font-family:var(--f-logo);margin-bottom:8px;font-size:clamp(2.6rem,6vw,3.6rem);font-weight:400;line-height:1}.login-sub{color:#5a4c63;margin-bottom:22px}.field{text-align:left;margin-bottom:14px;display:block}.field span{font-family:var(--f-title);margin:0 0 6px 4px;font-size:1.05rem;display:block}.field input{border:var(--stroke) solid var(--ink);background:#fff;border-radius:14px;width:100%;min-height:54px;padding:0 16px;font-size:1.1rem;transition:box-shadow .14s,transform .14s;box-shadow:inset 0 -5px #1d162614}.field input:focus{box-shadow:4px 4px 0 var(--ink), inset 0 -5px 0 #1d162614;outline:none;transform:translate(-2px,-2px)}.login-hint{color:#6a5b73;margin-top:14px;font-size:.92rem}.err{border:2.5px solid var(--ink);color:#8a0f2c;box-shadow:3px 3px 0 var(--ink);background:#ffd6de;border-radius:12px;margin-top:14px;padding:10px 12px;font-weight:900}.hub{max-width:1200px;margin:0 auto;padding:16px 18px 60px}.topbar{z-index:20;align-items:center;gap:14px;margin-bottom:18px;padding:10px 12px 10px 18px;display:flex;position:sticky;top:12px}.brand{color:inherit;align-items:center;gap:10px;line-height:1;text-decoration:none;display:flex}.brand-text{flex-direction:column;display:flex}.den-mark{filter:drop-shadow(0 3px #1d16262e);flex:none;transition:transform .2s;overflow:visible}.brand:hover .den-mark{transform:rotate(-6deg)scale(1.06)}.den-eyes{transform-box:fill-box;transform-origin:50%;animation:4.3s infinite den-blink}@keyframes den-blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.brand-title{font-family:var(--f-logo);font-size:1.85rem}.brand-sub{font-family:var(--f-title);color:var(--tangerine-d);letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-size:.78rem}.spacer{flex:1}.user{align-items:center;gap:10px;display:flex}.avatar{border:var(--stroke) solid var(--ink);width:42px;height:42px;font-family:var(--f-title);color:#fff;text-shadow:1.5px 1.5px 0 var(--ink);background:linear-gradient(180deg, var(--grape) 0 55%, var(--grape-d) 55%);box-shadow:2px 2px 0 var(--ink);border-radius:50%;place-items:center;font-size:1.25rem;display:grid}.logout{align-items:center;gap:6px;display:inline-flex}.user-text{flex-direction:column;line-height:1.1;display:flex}.user-text strong{font-family:var(--f-title);font-size:1.1rem;font-weight:400}.user-text small{color:#6a5b73;font-size:.78rem}.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:20px;margin-bottom:28px;display:grid}.hero-title{font-family:var(--f-logo);font-size:clamp(2.5rem,6vw,4.4rem);font-weight:400;line-height:.95}.hero-title .name{color:var(--sun)}.hero-sub{max-width:540px;margin-top:12px;font-size:1.15rem}.hero-pills{flex-wrap:wrap;gap:8px;margin:14px 0 18px;display:flex}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.dice{flex-shrink:0;width:38px;height:38px}.dice.rolling{animation:roll .9s var(--snap) infinite}@keyframes roll{0%{transform:rotate(0)scale(1)}40%{transform:rotate(220deg)scale(1.25)}to{transform:rotate(360deg)scale(1)}}.hero-scene{height:440px;position:relative}.scene-hint{color:#6a5b73;white-space:nowrap;font-size:.85rem;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.tirage{z-index:3;background:var(--sun);align-items:center;gap:10px;padding:10px 12px;font-size:1.05rem;display:flex;position:absolute;top:10px;right:6px}.tirage strong{font-family:var(--f-title);font-size:1.2rem;font-weight:400}.die-face{flex-shrink:0;width:34px;height:34px}.join{max-width:520px;padding:14px 16px}.join label{font-family:var(--f-title);margin-bottom:8px;font-size:1.1rem;display:block}.join-row{gap:10px;display:flex}.join input{border:var(--stroke) solid var(--ink);text-align:center;min-width:0;min-height:52px;font-family:var(--f-logo);letter-spacing:.4em;text-transform:uppercase;background:#fff;border-radius:14px;flex:1;padding:0 12px;font-size:1.7rem;box-shadow:inset 0 -5px #1d162614}.join input::placeholder{color:#cbbfd2}.join input:focus{box-shadow:3px 3px 0 var(--ink), inset 0 -5px 0 #1d162614;outline:none}.join-err{color:#b3143b;min-height:1.3em;margin-top:6px;font-size:.92rem;font-weight:900}.toolbar{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:24px;display:flex}.tabs{flex-wrap:wrap;gap:4px;padding:5px;display:flex}.tab{font-family:var(--f-title);background:0 0;border:none;border-radius:11px;align-items:center;gap:8px;padding:8px 14px;font-size:1.05rem;display:inline-flex;position:relative}.tab-pill{z-index:0;border:2.5px solid var(--ink);background:linear-gradient(180deg, var(--sun) 0 60%, var(--sun-d) 60%);box-shadow:2px 2px 0 var(--ink);border-radius:11px;position:absolute;inset:0}.tab-label,.tab-n{z-index:1;position:relative}.tab-n{font-family:var(--f-body);border:2px solid var(--ink);background:#fff;border-radius:999px;padding:0 7px;font-size:.8rem;font-weight:900}.search{flex:1;align-items:center;gap:8px;min-width:220px;min-height:56px;padding:0 14px;display:flex}.search input{background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:1.1rem}.grid{grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:28px 22px;display:grid}.card{background:var(--paper);border:var(--stroke) solid var(--ink);box-shadow:var(--shadow);transition:box-shadow .2s var(--spring);will-change:transform;border-radius:20px;flex-direction:column;display:flex;position:relative}.card:hover{box-shadow:11px 12px 0 var(--ink)}.card-art{border-bottom:var(--stroke) solid var(--ink);background:radial-gradient(#1d162629 1.5px, transparent 1.7px) 0 0 / 11px 11px, linear-gradient(180deg, var(--c) 0 64%, var(--cd) 64% 100%);border-radius:16px 16px 0 0;place-items:center;height:176px;display:grid;position:relative;overflow:hidden}.card-art:before{content:"";background:repeating-conic-gradient(#ffffff3d 0 10deg, transparent 10deg 20deg);transition:transform .9s var(--snap);position:absolute;inset:-40%}.card:hover .card-art:before{transform:rotate(45deg)}.poster{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.emblem{width:118px;height:118px;filter:drop-shadow(4px 4px 0 var(--ink));transition:transform .32s var(--spring);position:relative}.card:hover .emblem{transform:scale(1.12)rotate(-7deg)}.initial{font-family:var(--f-logo);font-size:5rem;line-height:1;position:relative}.card-face{z-index:1;filter:drop-shadow(2px 2px 0 var(--ink));position:absolute;bottom:8px;right:8px}.card-face .die-face{width:30px;height:30px}.card-body{flex-direction:column;flex:1;gap:8px;padding:14px 16px 16px;display:flex}.card-body h4{font-family:var(--f-title);font-size:1.6rem;font-weight:400;line-height:1.05}.card-body p{color:#3d3346;flex:1;font-size:.97rem;line-height:1.3}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:2.5px solid var(--ink);background:var(--paper-2);border-radius:999px;align-items:center;gap:4px;padding:2px 10px;font-size:.8rem;font-weight:900;display:inline-flex}.chip.tag{background:var(--c);color:#fff;text-shadow:1.5px 1.5px 0 var(--ink)}.sticker{z-index:4;border:var(--stroke) solid var(--ink);background:linear-gradient(180deg, var(--sun) 0 60%, var(--sun-d) 60%);font-family:var(--f-logo);box-shadow:3px 3px 0 var(--ink);transition:transform .26s var(--spring);pointer-events:none;border-radius:12px;padding:6px 14px;font-size:1.15rem;position:absolute;top:-14px;right:-12px;transform:rotate(8deg)scale(0)}.card:hover .sticker,.card:focus-visible .sticker,.card.picked .sticker{transform:rotate(8deg)scale(1)}.card.picked{box-shadow:11px 12px 0 var(--ink), 0 0 0 8px var(--sun)}.live{z-index:2;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:.78rem;font-weight:900;display:inline-flex;position:absolute;top:10px;left:10px}.live:before{content:"";border:2px solid var(--ink);background:var(--cherry);border-radius:50%;width:9px;height:9px;animation:1s ease-in-out infinite pulse}.card.cat-perso{background:#fff2f4}.card.cat-dev{filter:saturate(.7)}.empty{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:28px;display:flex}.empty-emoji{font-size:2.6rem}.footer{text-align:center;color:#6a5b73;margin-top:44px;font-size:.9rem}@media (width<=900px){.hero{grid-template-columns:minmax(0,1fr)}.hero-scene{order:-1;height:330px}.login{grid-template-columns:minmax(0,1fr)}.login-scene{height:300px}}@media (width<=640px){.topbar{gap:8px;padding:8px 8px 8px 14px;top:8px}.brand-title{font-size:1.5rem}.brand{gap:7px}.den-mark{width:38px;height:30px}.brand-sub,.user-text,.server-label,.logout-label{display:none}.pill.server{padding:8px}.logout{padding:8px 10px}.hub{padding:10px 12px 40px}.hero-actions .btn{flex:200px}.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 16px}.tabs{width:100%}.tab{flex:auto;justify-content:center;padding:8px 10px;font-size:.95rem}.search{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
