:root{--bg:#0b0c13;--panel:#141620;--panel2:#1b1d28;--ink:#f6f0e5;--muted:#9295a5;--red:#ee3448;--yellow:#ffd84a;--blue:#3d65ff;--green:#31c77a;--light:#d9cfb9;--dark:#544b58;--shadow:0 24px 70px #0008}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif}body{overflow-x:hidden;background-image:radial-gradient(circle at 20% 15%,#20223c55,transparent 30%),radial-gradient(circle at 85% 80%,#3c182455,transparent 35%)}button,input{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}header{height:76px;padding:0 clamp(24px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;position:relative;z-index:5}.brand{font:24px "Archivo Black";color:var(--ink);text-decoration:none;letter-spacing:-1.5px}.brand span{color:var(--red);font-style:italic;margin-right:4px}nav{display:flex;align-items:center;gap:24px}.text-button,.lang,.icon-button{border:0;background:none;color:var(--ink);cursor:pointer}.text-button{color:var(--muted)}.lang{border:1px solid #ffffff25;border-radius:8px;padding:7px 10px;font-weight:700}.connection{font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center}.connection i{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px var(--yellow)}.connection.online i{background:var(--green);box-shadow:0 0 12px var(--green)}main{min-height:calc(100vh - 76px)}.hidden{display:none!important}.lobby{min-height:calc(100vh - 76px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:8vw;padding:60px clamp(24px,8vw,130px)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:3px;color:var(--red);margin-bottom:22px}.hero-copy h1{font:clamp(48px,7vw,102px)/.92 "Archivo Black";letter-spacing:-5px;margin:0;text-transform:uppercase}.hero-copy h1 em{color:transparent;-webkit-text-stroke:2px var(--ink);font-style:normal}.hero-copy>p{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--muted);max-width:600px}.mini-cards{height:110px;display:flex;align-items:end;margin-top:30px}.mini-cards b{display:grid;place-items:center;width:64px;height:92px;border-radius:9px;border:5px solid #f5ead8;color:white;font:23px "Archivo Black";box-shadow:0 12px 22px #0008;margin-right:-12px}.mini-cards b:nth-child(1){transform:rotate(-12deg)}.mini-cards b:nth-child(2){transform:translateY(-9px)}.mini-cards b:nth-child(3){transform:rotate(12deg)}.red{background:var(--red)}.blue{background:var(--blue)}.yellow{background:#e6a713}.lobby-card{background:#151722dd;border:1px solid #ffffff16;border-radius:20px;padding:34px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#0d0e15;padding:4px;border-radius:10px;margin-bottom:30px}.tabs button{border:0;background:none;color:var(--muted);padding:12px;border-radius:7px;font-weight:700;cursor:pointer}.tabs button.active{background:var(--panel2);color:var(--ink);box-shadow:0 4px 12px #0005}label{display:block;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.5px;margin:16px 0}input{display:block;width:100%;margin-top:8px;background:#0e0f17;border:1px solid #ffffff19;border-radius:9px;color:var(--ink);padding:15px 16px;outline:none;font-size:16px;text-transform:none}#roomCode{text-transform:uppercase;letter-spacing:6px;font-weight:800}input:focus{border-color:#ffffff55;box-shadow:0 0 0 3px #ffffff09}.primary{width:100%;border:0;border-radius:10px;background:var(--red);color:white;font-weight:800;padding:16px 18px;display:flex;justify-content:center;gap:15px;cursor:pointer;box-shadow:0 10px 28px #ee344830;transition:.2s}.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.fine{text-align:center;color:#686b78;font-size:12px}.game{padding:22px clamp(15px,3vw,50px) 40px}.game-topbar{display:flex;justify-content:space-between;align-items:center;max-width:1300px;margin:auto auto 16px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:1.5px}.room-code,#inviteCode{border:0;background:none;color:var(--yellow);font-weight:800;letter-spacing:3px;cursor:pointer}.turn-pill{padding:9px 14px;background:#ffffff0b;border:1px solid #ffffff12;border-radius:30px;display:flex;align-items:center;gap:8px}.turn-pill i{width:8px;height:8px;border-radius:50%;background:var(--muted)}.turn-pill.active i{background:var(--green);box-shadow:0 0 12px var(--green)}.icon-button{font-size:25px;color:var(--muted)}.arena{display:grid;grid-template-columns:230px minmax(420px,680px) 230px;gap:28px;justify-content:center;align-items:center}.section-label{font-size:10px;letter-spacing:2.5px;color:#696c79;font-weight:800;margin-bottom:14px}.card-panel,.match-panel{align-self:center}.uno-card{width:180px;height:262px;perspective:1000px;margin:auto;filter:drop-shadow(0 20px 30px #0008)}.card-inner{width:100%;height:100%;position:relative;transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}.uno-card:not(.idle) .card-inner{transform:rotateY(180deg)}.card-back,.card-front{position:absolute;inset:0;backface-visibility:hidden;border:8px solid #eee3d3;border-radius:17px;overflow:hidden;display:flex;align-items:center;justify-content:center}.card-back{background:var(--red);transform:rotate(5deg)}.card-back:before,.card-front:before{content:"";position:absolute;width:140%;height:62%;background:#fff;border-radius:50%;transform:rotate(-50deg);opacity:.93}.card-back span{position:relative;z-index:1;color:var(--red);font:25px/1 "Archivo Black";font-style:italic;transform:rotate(-10deg);text-shadow:1px 1px #222}.card-front{transform:rotateY(180deg) rotate(-2deg);background:var(--blue);flex-direction:column;color:white}.card-front:before{opacity:.9}.card-front>*{z-index:1;color:#161722}.card-front small{font-weight:900;letter-spacing:2px}.card-front strong{font:65px "Archivo Black"}.card-front span{text-align:center;font-weight:800;font-size:12px;padding:0 15px}.uno-card.kind-number .card-front{background:var(--blue)}.uno-card.kind-draw2 .card-front,.uno-card.kind-draw4 .card-front{background:var(--red)}.uno-card.kind-skip .card-front{background:#e5aa14}.uno-card.kind-reverse .card-front{background:var(--green)}.uno-card.kind-joker .card-front{background:conic-gradient(var(--red),#e5aa14,var(--green),var(--blue),var(--red))}.moves-meter{display:flex;justify-content:space-between;align-items:center;background:#141620;border:1px solid #ffffff10;padding:13px 15px;border-radius:10px;margin-top:24px;color:var(--muted);font-size:12px}.moves-meter strong{font:22px "Archivo Black";color:var(--ink)}.card-explain{font-size:12px;color:#777a89;line-height:1.5;padding:14px 4px}.board-column{width:min(100%,680px)}.player-bar{height:57px;display:flex;align-items:center;gap:11px;padding:7px 4px}.player-bar .avatar{width:38px;height:38px;border-radius:9px;background:#262936;display:grid;place-items:center;font-size:10px;font-weight:900}.player-bar strong{font-size:14px;display:block}.player-bar small{color:var(--muted);font-size:11px}.player-bar time{margin-left:auto;background:#161821;border-radius:8px;padding:8px 12px;font:19px "Archivo Black";font-variant-numeric:tabular-nums}.player-bar.active time{background:var(--ink);color:#15161c}.board-wrap{position:relative;border-radius:7px;overflow:hidden;box-shadow:0 28px 75px #000a,0 0 0 1px #ffffff17}.board{aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);user-select:none}.square{position:relative;display:grid;place-items:center;cursor:default}.square.light{background:var(--light)}.square.dark{background:var(--dark)}.square.last:after{content:"";position:absolute;inset:0;background:#ffd73766}.square.selected:after{content:"";position:absolute;inset:0;background:#74a7ff66;box-shadow:inset 0 0 0 4px #8ab7ff}.square.legal:before{content:"";position:absolute;z-index:2;width:25%;height:25%;border-radius:50%;background:#19213366;box-shadow:0 0 0 7px #ffffff12}.square.capture:before{width:80%;height:80%;background:transparent;border:5px solid #202a3c66}.piece{position:relative;z-index:3;font-size:clamp(31px,5vw,59px);line-height:1;cursor:grab;transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s;font-family:"Times New Roman",serif}.piece.white{color:#fff9eb;text-shadow:0 3px 2px #312f3a,0 0 1px #000}.piece.black{color:#25222a;text-shadow:0 2px 1px #ffffff55,0 0 1px #000}.square:hover .piece{transform:translateY(-3px);filter:drop-shadow(0 6px 4px #0005)}.coord{position:absolute;font-size:9px;font-weight:800;opacity:.55;z-index:1}.coord.file{bottom:3px;right:4px}.coord.rank{top:3px;left:4px}.board-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff8,transparent 55%)}.board-flash.go{animation:flash .6s}.waiting-box{background:#141620;border:1px solid #ffffff12;border-radius:13px;padding:20px;text-align:center}.waiting-box strong{font-size:14px}.waiting-box p,.waiting-box small{display:block;color:var(--muted);font-size:12px}.waiting-box button{font:24px "Archivo Black";margin:5px}.start{margin-top:12px}.history{max-height:350px;overflow:auto}.history-row{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;border-bottom:1px solid #ffffff0b;padding:10px 3px;font-size:12px}.history-row i{width:7px;height:7px;border-radius:50%;background:white;margin:auto}.history-row i.black{background:#555}.history-row span{color:var(--muted)}.history-row b{font-size:11px}.spectators{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:18px}.toast{position:fixed;z-index:30;bottom:30px;left:50%;transform:translate(-50%,20px);background:#f4ecdf;color:#171820;padding:12px 18px;border-radius:9px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;z-index:20;inset:0;background:#05060bd9;display:grid;place-items:center;padding:22px;backdrop-filter:blur(10px)}.modal-card{position:relative;width:min(760px,100%);max-height:90vh;overflow:auto;background:#171923;border:1px solid #ffffff16;border-radius:20px;padding:42px;box-shadow:var(--shadow)}.modal-close{position:absolute;right:20px;top:16px;border:0;background:none;color:var(--muted);font-size:27px;cursor:pointer}.modal-card h2{font:36px "Archivo Black";text-transform:uppercase;margin:0 0 12px}.modal-card>p{color:var(--muted)}.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0}.rule{background:#0f1018;border-radius:11px;padding:15px;display:grid;grid-template-columns:45px 1fr;gap:12px;align-items:center}.rule b:first-child{width:42px;height:58px;border:4px solid #eee3d3;border-radius:6px;display:grid;place-items:center;background:var(--blue);font:18px "Archivo Black"}.rule strong{display:block;font-size:13px}.rule span{font-size:11px;color:var(--muted);line-height:1.4}.chess-note{border-top:1px solid #ffffff12;padding-top:20px;display:flex;gap:20px}.chess-note span{color:var(--muted);font-size:12px;line-height:1.5}.result{text-align:center;max-width:460px}.result-icon{font-size:70px;color:var(--yellow)}@keyframes flash{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}@media(max-width:1050px){.arena{grid-template-columns:170px minmax(380px,600px)}.match-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.match-panel>.section-label{grid-column:1/-1}.history{max-height:150px}}@media(max-width:760px){header{height:62px}.text-button,.connection span{display:none}.lobby{grid-template-columns:1fr;padding-top:40px}.hero-copy h1{letter-spacing:-3px}.mini-cards{display:none}.arena{display:flex;flex-direction:column}.board-column{order:1}.card-panel{order:2;width:100%;display:grid;grid-template-columns:130px 1fr;gap:12px}.card-panel>.section-label{grid-column:1/-1}.uno-card{width:120px;height:175px;grid-row:2/4}.card-front{border-width:5px}.card-front strong{font-size:43px}.moves-meter{margin:0}.match-panel{order:3;width:100%;display:block}.game{padding:12px 8px}.piece{font-size:clamp(33px,11vw,55px)}.rule-grid{grid-template-columns:1fr}.modal-card{padding:32px 20px}.modal-card h2{font-size:28px}}