:root{--jokr-midnight: #050312;--jokr-indigo: #2f197a;--jokr-magenta: #ff2d75;--jokr-orange: #ff8a3d;--jokr-gold: #ffd166;--jokr-cream: #fdf4ff;font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color:var(--jokr-cream);background-color:var(--jokr-midnight);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}a{font-weight:600;color:var(--jokr-gold);text-decoration:none}a:hover{color:var(--jokr-orange)}body{margin:0;min-height:100vh;background:radial-gradient(52% 65% at 10% 20%,rgba(255,45,117,.32),transparent 62%),radial-gradient(46% 60% at 82% 18%,rgba(255,138,61,.22),transparent 60%),radial-gradient(40% 54% at 74% 88%,rgba(47,25,122,.4),transparent 70%),linear-gradient(145deg,#050312f0,#0c081ff5);background-color:var(--jokr-midnight);color:var(--jokr-cream)}#root{min-height:100vh}button,input{font-family:inherit}.app-shell{min-height:100vh;padding:clamp(24px,5vw,48px);background:radial-gradient(52% 65% at 10% 20%,rgba(255,45,117,.32),transparent 62%),radial-gradient(46% 60% at 82% 18%,rgba(255,138,61,.22),transparent 60%),radial-gradient(40% 54% at 74% 88%,rgba(47,25,122,.4),transparent 70%),linear-gradient(145deg,#050312f0,#0c081ff5);display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box}.app-shell.home-view{align-items:center}.app-container{width:min(1180px,100%);background:#070514d1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);box-shadow:0 28px 80px #0603148c;border-radius:28px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:clamp(28px,4vw,40px);color:#fdf4ff}.app-container.home{align-items:stretch;text-align:left;gap:clamp(24px,4vw,36px)}.home-hero{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,48px);padding:clamp(24px,4vw,40px);border-radius:28px;background:linear-gradient(135deg,#2f197ad1,#ff2d75bf),radial-gradient(circle at 80% 20%,rgba(255,208,102,.6),transparent 65%);overflow:hidden;isolation:isolate}.home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(65% 85% at 15% 20%,rgba(49,215,255,.4),transparent 70%);opacity:.45;mix-blend-mode:screen;z-index:0}.home-hero__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(12px,2vw,20px)}.hero-eyebrow{text-transform:uppercase;letter-spacing:.32em;font-size:12px;font-weight:700;color:#ffd066eb}.home-hero h1{margin:0;font-size:clamp(28px,5vw,44px);line-height:1.15;color:#fff8f0}.home-hero p{margin:0;color:#fff1ebe0;font-size:clamp(15px,2.3vw,18px);line-height:1.6}.hero-actions{display:flex;align-items:center;gap:12px;margin-top:clamp(8px,1.5vw,16px)}.hero-action{border-color:#fff1eb8c;color:#fff7ed;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hero-action:hover{border-color:#fff1ebcc;background:#fff1eb1f}.home-hero__media{position:relative;z-index:1;display:flex;justify-content:flex-end;align-items:center}.home-hero__media img{width:min(360px,100%);max-width:100%;filter:drop-shadow(0 22px 45px rgba(5,3,18,.45));border-radius:24px}.game-section{display:flex;flex-direction:column;gap:18px}.game-section__header h2{margin:0;font-size:clamp(24px,4vw,32px);color:#fdf4ff}.game-section__header p{margin:4px 0 0;color:#fff1ebb8;font-size:16px}.game-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}.game-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#2f197aa6,#ff2d757a);border-radius:22px;border:none;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;cursor:pointer;color:inherit;text-align:left;font:inherit;line-height:1.45;appearance:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.game-card:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 20%,rgba(255,208,102,.22),transparent 70%);opacity:0;transition:opacity .16s ease}.game-card:hover{transform:translateY(-4px);border-color:#ffd06673;box-shadow:0 20px 45px #0503128c}.game-card:hover:after{opacity:1}.game-card:focus-visible{outline:2px solid rgba(255,208,102,.55);outline-offset:3px}.game-title{font-size:20px;font-weight:700;color:#fff7ed}.game-description{font-size:14px;color:#fff1ebd1;line-height:1.45}.top-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%}.back-button{padding-left:14px;padding-right:14px}.player-identity{font-size:14px;color:#e2e8f0cc}.room-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-start}.room-info h1{margin:4px 0 8px;font-size:clamp(28px,4vw,36px);font-weight:700}.room-info .room-code{text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:#94a3b8d9;margin:0}.room-status{margin:0;color:#e2e8f0d9;font-size:15px}.room-actions{display:flex;gap:12px}.room-actions button{white-space:nowrap}.feedback-area{display:flex;flex-direction:column;gap:8px}.feedback{padding:12px 16px;border-radius:12px;font-size:14px;font-weight:500}.feedback.success{background:#22c55e2e;border:1px solid rgba(34,197,94,.45);color:#bbf7d0}.feedback.warning{background:#f973162e;border:1px solid rgba(249,115,22,.45);color:#fed7aa}.feedback.error{background:#f871712e;border:1px solid rgba(248,113,113,.45);color:#fecaca}.room-main{display:grid;grid-template-columns:400px 1fr;gap:24px;align-items:stretch}.player-panel{background:#1e293ba6;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:20px;border:1px solid rgba(148,163,184,.1)}.panel-header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.panel-header h2{margin:0;font-size:20px}.player-count{font-size:14px;padding:4px 10px;border-radius:999px;background:#94a3b82e;color:#e2e8f0d9}.player-list{display:flex;flex-direction:column;gap:12px}.player-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:#94a3b814;border:1px solid rgba(148,163,184,.1)}.player-card.active-turn{background:#22c55e1f;border-color:#22c55e8c;box-shadow:0 0 0 1px #22c55e40}.player-card.winner{background:#facc151f;border-color:#eab3088c;box-shadow:0 0 0 1px #eab30833}.player-card.empty{justify-content:center;color:#e2e8f0b3;font-style:italic}.player-card>button{margin-left:auto;flex-shrink:0;white-space:nowrap}.player-avatar{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:600;color:#0f172a;text-transform:uppercase;letter-spacing:.04em}.player-details{display:flex;flex-direction:column;gap:6px;flex:1}.player-name-row{display:flex;align-items:center;gap:10px}.player-symbol{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.24);color:#e2e8f0e0;text-transform:uppercase;letter-spacing:.08em}.player-tags-row{display:flex;flex-wrap:wrap;gap:6px}.player-name{font-weight:600}.player-status{font-size:12px;text-transform:uppercase;letter-spacing:.15em;padding:4px 8px;border-radius:999px;border:1px solid transparent}.player-status.host{background:#6366f126;border-color:#6366f159;color:#c7d2fe}.player-status.ready{background:#22c55e26;border-color:#22c55e73;color:#bbf7d0}.player-status.waiting{background:#f8fafc1f;border-color:#94a3b859;color:#e2e8f0d9}.player-tag{font-size:12px;padding:4px 10px;border-radius:999px;background:#94a3b824;color:#e2e8f0d9;width:fit-content}.player-tag.host{background:#6366f12e;color:#c7d2fe}.player-tag.turn{background:#22c55e33;color:#bef264f2}.player-tag.winner{background:#facc152e;color:#fef08af2}.player-tag.draw{background:#93c5fd38;color:#bfdbfef2}.invite-card{margin-top:auto;background:#0f172a73;border-radius:16px;padding:16px;border:1px dashed rgba(148,163,184,.4);display:flex;flex-direction:column;gap:12px;text-align:center}.chat-panel{background:#1e293ba6;border-radius:20px;border:1px solid rgba(148,163,184,.1);padding:24px;display:flex;flex-direction:column;gap:20px}.panel-tabs{display:flex;gap:12px;flex-wrap:wrap}.panel-tab{padding:8px 18px;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#0f172a80;color:#e2e8f0d1;font-weight:600;letter-spacing:.01em;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}.panel-tab:hover{transform:translateY(-1px);background:#6366f138;border-color:#818cf873;color:#ede9fe}.panel-tab.active{background:#6366f152;border-color:#818cf8b3;color:#f5f3ff;box-shadow:inset 0 0 0 1px #818cf859}.panel-tab:focus-visible{outline:2px solid rgba(129,140,248,.55);outline-offset:3px}.settings-panel{display:flex;flex-direction:column;gap:20px}.settings-header h2{margin:0 0 4px}.settings-header p{margin:0;color:#e2e8f0bf}.start-toggle{display:flex;flex-direction:column;gap:16px;background:#0f172a73;border-radius:16px;border:1px solid rgba(148,163,184,.2);padding:18px}.start-toggle h3{margin:0;font-size:18px}.start-toggle p{margin:0;color:#94a3b8d9}.start-switch{position:relative;display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#0f172aa6;color:#e2e8f0e6;font-weight:600;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease}.start-switch:focus-visible{outline:2px solid rgba(129,140,248,.55);outline-offset:3px}.start-switch[aria-checked=true]{border-color:#818cf899;background:#6366f147;color:#ede9fe}.start-switch[aria-checked=true] .start-switch-track{background:#818cf8bf}.start-switch[aria-checked=true] .start-switch-thumb{transform:translate(18px);background:#1e1b4b}.start-switch:disabled{cursor:default;opacity:.6}.start-switch-track{width:44px;height:24px;border-radius:999px;background:#94a3b84d;position:relative;transition:background .16s ease}.start-switch-thumb{position:absolute;top:3px;left:4px;width:18px;height:18px;border-radius:999px;background:#e2e8f0e6;transition:transform .16s ease,background .16s ease}.start-switch-label{white-space:nowrap}.start-summary{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;border:1px solid rgba(148,163,184,.2);background:#0f172a66}.start-summary-row{display:flex;align-items:center;gap:12px;font-weight:600;color:#e2e8f0e6}.start-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#818cf840;border:1px solid rgba(129,140,248,.45);font-weight:700;color:#ede9fe}.settings-helper{margin:0;font-size:13px;color:#cbd5e1b3}.chat-header h2{margin:0}.chat-header p{margin:4px 0 0;color:#e2e8f0bf}.chat-messages{flex:1;min-height:260px;max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:8px}.chat-message{padding:12px 16px;border-radius:14px;background:#94a3b80f;border:1px solid rgba(148,163,184,.14);display:flex;flex-direction:column;gap:6px}.chat-message.self{align-self:flex-end;background:#6366f133;border-color:#6366f166}.chat-message.system{background:#0f172ab3;border-style:dashed;border-color:#94a3b866;color:#e2e8f0cc;font-style:italic}.chat-meta{display:flex;gap:12px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#94a3b8bf}.chat-body{margin:0;color:#e2e8f0f2;white-space:pre-wrap}.chat-form{display:flex;gap:12px}.chat-form input{flex:1;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,208,102,.25);background:#0c091eb8;color:#fdf4ff;font-size:15px}.chat-form input:focus{outline:2px solid rgba(255,208,102,.55);outline-offset:2px}.chat-form input:disabled{opacity:.6;cursor:not-allowed}.primary,.secondary,.ghost{border-radius:12px;padding:10px 18px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.primary{background:linear-gradient(135deg,#ff2d75,#ff8a3d);color:#fff8f0;box-shadow:0 14px 35px #ff2d7559}.primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px #ff2d7573}.secondary{background:#fff1eb14;color:#fdf4ff;border:1px solid rgba(255,241,235,.28)}.secondary:hover{transform:translateY(-2px);background:#fff1eb24}.ghost{background:transparent;color:#fff1ebd9;border:1px solid rgba(255,241,235,.32)}.ghost:hover{transform:translateY(-2px);background:#fff1eb1a}.primary:disabled,.secondary:disabled,.ghost:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.modal-backdrop{position:fixed;inset:0;background:#050312cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}.modal{width:min(420px,100%);background:#0c091ef0;border:1px solid rgba(255,241,235,.22);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px;color:#fdf4ff;box-shadow:0 24px 60px #05031280}.modal h2{margin:0;font-size:24px}.modal p{margin:0;color:#fff1ebc7;font-size:15px}.modal input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,208,102,.25);background:#070514bf;color:#fdf4ff;font-size:15px}.modal input:focus{outline:2px solid rgba(255,208,102,.55);outline-offset:2px}.modal-actions{display:flex;justify-content:flex-end;gap:12px}@media(max-width:1024px){.room-main{grid-template-columns:1fr}.player-panel{order:2}.chat-panel{order:1}}@media(max-width:900px){.home-hero{grid-template-columns:1fr;text-align:left}.home-hero__media{justify-content:center}}@media(max-width:640px){.home-hero__media img{width:min(280px,100%)}.hero-actions{width:100%}.hero-action{width:100%;text-align:center}.app-shell{padding:16px}.app-container{padding:20px;border-radius:20px;gap:24px}.game-grid{grid-template-columns:1fr}.top-bar{flex-direction:column;align-items:stretch}.player-identity{text-align:center}.room-actions{width:100%;flex-direction:column}.room-actions button{width:100%}.chat-messages{max-height:none}}.game-panel{background:#1e293ba6;border-radius:20px;border:1px solid rgba(148,163,184,.1);padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px}.morpion-board{width:100%;max-width:420px;aspect-ratio:1 / 1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.morpion-cell{width:100%;aspect-ratio:1 / 1;border-radius:16px;border:2px solid rgba(255,208,102,.25);background:#0c091eb8;color:#ffe4e6;font-size:clamp(36px,8vw,64px);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,color .16s ease}.morpion-cell:hover{background:#ffd0661a;border-color:#ffd06673;transform:translateY(-2px)}.morpion-cell:disabled,.morpion-cell[disabled]{cursor:not-allowed;opacity:.6;transform:none}.morpion-cell.locked{opacity:.5}.morpion-cell.winning{border-color:#22c55e99;background:#22c55e2e;color:#bbf7d0}.morpion-cell.filled{color:#fdf4ff}.morpion-cell.cross{color:#60a5fa}.morpion-cell.circle{color:#f87171}.morpion-cell:focus-visible{outline:2px solid rgba(255,208,102,.55);outline-offset:3px}.game-status{margin:0;font-weight:600;color:#fff1ebe0;text-align:center}.turn-timer{display:flex;align-items:center;gap:6px;font-weight:600;color:#60a5fae6;background:#60a5fa1f;border-radius:999px;padding:8px 14px}.turn-timer span{font-variant-numeric:tabular-nums}.turn-timer.critical{color:#f87171f2;background:#f8717124}.turn-hint{margin:8px 0 0;color:#94a3b8d9;font-size:14px;text-align:center}.turn-hint.self{color:#bef264eb;font-weight:600}.result-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;background:#ffffff29;color:#fdf4ff;width:fit-content}.result-badge.victory{background:#22c55e3d;color:#bbf7d0}.result-badge.defeat{background:#f871713d;color:#fecaca}.result-badge.draw{background:#93c5fd3d;color:#bfdbfe}.result-modal-overlay{position:fixed;inset:0;background:#070514c7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,6vw,32px);z-index:60}.result-modal{position:relative;width:min(440px,100%);background:linear-gradient(135deg,#2f197ad1,#ff2d75ad);border-radius:24px;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 64px #0603148c;padding:clamp(24px,5vw,36px);display:flex;flex-direction:column;gap:16px;color:#fff7ed}.result-modal h2{margin:0;font-size:clamp(24px,4.5vw,30px);font-weight:700}.result-modal-description{margin:0;font-size:16px;line-height:1.6;color:#fff1ebe6}.result-modal-hint,.result-modal-identity{margin:0;font-size:14px;line-height:1.6;color:#fff1ebc7}.result-modal-identity{font-weight:500;color:#fff1ebdb}.result-modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:999px;border:none;background:#ffffff26;color:#fdf4ff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease}.result-modal-close:hover{background:#ffffff38}.result-modal-close:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:3px}.result-modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.result-modal-actions button{flex:1 1 150px;min-width:140px}