*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{font-family:sans-serif}.home-container{background:linear-gradient(135deg,#0f172a,#1e293b);justify-content:center;align-items:center;height:100vh;font-family:sans-serif;display:flex}.home-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#ffffff0f;border-radius:16px;width:420px;padding:30px;box-shadow:0 10px 30px #0006}.title{text-align:center;margin-bottom:20px;font-size:28px}.button-row{justify-content:space-between;gap:10px;margin-bottom:20px;display:flex}.join-row{gap:10px;margin-bottom:15px;display:flex}input{border:none;border-radius:8px;outline:none;flex:1;padding:10px}.error-message{text-align:center;background:#dc2626;border-radius:8px;margin-top:10px;padding:10px;transition:opacity .3s}.error-message.hide{opacity:0}.error-message.show{opacity:1}.controls-panel{background:#ffffff14;border-radius:12px;margin-top:15px;padding:15px}.controls-panel h3{margin-bottom:10px}.controls-panel ul{margin:0;padding-left:18px}.controls-panel li{margin-bottom:6px}.card{-webkit-user-select:none;user-select:none;background:linear-gradient(#fff,#f6f6f6);border:2px solid #1e1e1e;border-radius:14px;width:120px;height:170px;transition:transform .15s,box-shadow .15s;position:relative;box-shadow:0 6px 14px #00000038,inset 0 1px #fffc}.card:hover{transform:translateY(-6px);box-shadow:0 12px 22px #00000047,inset 0 1px #fffc}.card-index{color:#fff;pointer-events:none;background:#111;border-radius:999px;justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 8px;font-size:.85rem;font-weight:700;display:flex;position:absolute;top:-14px;left:50%;transform:translate(-50%);box-shadow:0 3px 8px #00000040}.card.red{color:#c62828}.card.black{color:#111}.card.selected{z-index:10;outline:3px solid gold;transform:translateY(-20px)}.hand{flex-direction:row;justify-content:center;align-items:flex-end;gap:12px;width:100%;margin:0;padding:20px;list-style:none;display:flex}.card-back-wrapper{justify-content:center;align-items:center;width:120px;height:170px;display:flex;position:relative}.card-back{background:repeating-linear-gradient(45deg,#1e3a8a,#1e3a8a 10px,#1e40af 10px 20px);border:2px solid #1e1e1e;border-radius:14px;width:100%;height:100%;position:relative;box-shadow:0 6px 14px #00000040,inset 0 1px #fff3}.card-back:after{content:"";border:2px solid #fff3;border-radius:10px;position:absolute;inset:10px}.card-back-count{color:#fff;background:#111;border-radius:999px;justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 8px;font-size:.85rem;font-weight:700;display:flex;position:absolute;top:-10px;right:-10px;box-shadow:0 3px 8px #0000004d}.pile-card{-webkit-user-select:none;user-select:none;background:linear-gradient(#fff,#f6f6f6);border:2px solid #1e1e1e;border-radius:14px;width:120px;height:170px;transition:transform .15s,box-shadow .15s;position:relative;box-shadow:0 6px 14px #00000038,inset 0 1px #fffc}.card-corner-top{flex-direction:column;align-items:flex-start;line-height:1;display:flex;position:absolute;top:10px;left:10px}.card-corner-rank{font-size:1.2rem;font-weight:700}.card-corner-suit{font-size:1.1rem}.card-center{font-size:3rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-corner-bottom{flex-direction:column;align-items:flex-end;line-height:1;display:flex;position:absolute;bottom:10px;right:10px;transform:rotate(180deg)}.pile-card.red{color:#c62828}.pile-card.black{color:#111}.playpile{perspective:1000px;width:120px;height:170px}.playpile-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;position:relative}.playpile.flipped .playpile-inner{transform:rotateY(180deg)}.playpile-front,.playpile-back{backface-visibility:hidden;border-radius:14px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;box-shadow:0 6px 14px #00000040}.playpile-front{background:#fff;border:2px solid #1e1e1e;font-size:3rem}.playpile-back{color:#fff;background:repeating-linear-gradient(45deg,#1e3a8a,#1e3a8a 10px,#1e40af 10px 20px);border:2px solid #1e1e1e;font-size:2rem;transform:rotateY(180deg)}.playpile.hovered{transform:scale(1.05)}.drawpile{border-radius:14px;justify-content:center;align-items:center;transition:transform .15s,box-shadow .2s;display:flex;position:relative}.drawpile.clickable{cursor:pointer}.drawpile.clickable:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 0 18px #3b82f659,0 8px 24px #00000059}.drawpile.clickable:active{transform:scale(.98)}.drawpile-count{color:#fff;background:#0f172af2;border:2px solid #ffffff1f;border-radius:999px;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 8px;font-size:14px;font-weight:700;display:flex;position:absolute;bottom:-10px;right:-10px;box-shadow:0 4px 10px #00000059}.stuck-button{color:#fff;cursor:pointer;background-color:#3b82f6;border:none;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:700;transition:background-color .2s,transform .15s,opacity .2s}.stuck-button:hover:not(:disabled){background-color:#2563eb;transform:scale(1.05)}.stuck-button:active:not(:disabled){transform:scale(.97)}.stuck-button:disabled,.stuck-button.disabled{cursor:not-allowed;opacity:.7;background-color:#6b7280}.Board{background:radial-gradient(circle,#1e293b 0%,#0f172a 70%);grid-template-rows:auto 1fr auto;grid-template-columns:1fr 2fr 2fr 1fr;gap:20px;width:100%;height:100vh;padding:20px;transition:filter .4s,opacity .4s;display:grid}.opp-side{grid-column:1/-1;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.play-field{grid-column:1/-1;justify-content:center;align-items:center;gap:40px;display:flex}.play-field>*{justify-content:center;align-items:center;display:flex}.my-side{grid-column:1/-1;justify-content:space-between;align-items:flex-end;padding:10px 20px;display:flex}.my-side,.opp-side{min-height:180px}.error-message{color:#fff;pointer-events:none;background-color:#dc2626;border-radius:8px;padding:12px 24px;font-size:18px;font-weight:700;transition:opacity .3s;position:absolute;top:100px;left:50%;transform:translate(-50%)}.game-over{color:#fff;pointer-events:none;border-radius:8px;font-size:100px;font-weight:700;transition:opacity .5s;position:absolute;top:50%;left:50%;transform:translateY(-50%)}.game-over.show{opacity:1}.game-over.hide{opacity:0}.Board.over{filter:brightness(.45)blur(3px)}.Board{position:relative;overflow:hidden}.board-content{display:contents}.board-content.over{filter:brightness(.35)blur(4px);pointer-events:none}.board-content.over .opp-side,.board-content.over .play-field,.board-content.over .my-side,.board-content.over .error-message{filter:brightness(.35)blur(4px);transition:filter .4s,opacity .4s}.game-over-overlay{z-index:1000;flex-direction:column;justify-content:center;align-items:center;animation:.35s fadeIn;display:flex;position:absolute;inset:0}.game-over-message{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#0f172ae6;border:1px solid #ffffff14;border-radius:20px;padding:30px 60px;font-size:96px;font-weight:700;box-shadow:0 10px 30px #00000073}.return-home-button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:12px;padding:14px 28px;font-size:20px;font-weight:700;transition:transform .15s,background .2s}.return-home-button:hover{background:#2563eb;transform:translateY(-2px)}.return-home-button:active{transform:scale(.98)}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.room-container{background:linear-gradient(135deg,#0f172a,#111827);justify-content:center;align-items:center;height:100vh;font-family:sans-serif;display:flex}.room-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;text-align:center;background:#ffffff0f;border-radius:16px;width:420px;padding:30px;box-shadow:0 10px 30px #0006}.room-title{margin-bottom:10px;font-size:28px}.room-id{opacity:.9;margin:10px 0;font-size:16px}.room-id span{color:#60a5fa;font-weight:700}.player-slots{justify-content:center;gap:20px;margin:20px 0;display:flex}.player-slot{color:#ffffff80;background:#ffffff14;border:2px solid #ffffff26;border-radius:12px;justify-content:center;align-items:center;width:120px;height:80px;font-size:14px;transition:all .2s;display:flex}.player-slot.filled{color:#bbf7d0;background:#22c55e40;border:2px solid #22c55e;box-shadow:0 0 12px #22c55e66}.room-buttons{flex-direction:column;gap:10px;display:flex}button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:8px;padding:10px 14px;transition:all .2s}button:hover{background:#2563eb}button.secondary{background:#ffffff1a}button.secondary:hover,button:disabled{background:#fff3}