:root{--clash-pink:#ff4f91;--clash-purple:#755cff;--clash-cyan:#52e7ef;--clash-ink:#090b18}
body{background:radial-gradient(circle at 15% 0,#39235d 0,transparent 36%),radial-gradient(circle at 90% 10%,#123e5d 0,transparent 34%),#090b18}
.wrap{max-width:1200px}
.brand{font-size:20px}.panel{background:linear-gradient(145deg,#16172be8,#101524ed);backdrop-filter:blur(14px);border-color:#ffffff20}
#game{overflow:hidden;background:radial-gradient(circle at 50% 15%,#332b69,#121326 55%,#090b18);border-color:#725cff66}
.table{min-height:330px;border-radius:30px;border:1px solid #ffffff24;background:radial-gradient(ellipse at center,#30386c 0,#171a38 45%,#0d1022 78%);box-shadow:inset 0 0 80px #0008,0 25px 70px #0008;perspective:900px}
.table:before{content:'';position:absolute;inset:10%;border-radius:50%;border:1px solid #ffffff12;box-shadow:0 0 40px #755cff22;pointer-events:none}
.table:after{display:none!important}
.card{position:relative;isolation:isolate;overflow:hidden;width:94px;height:138px;border-radius:20px;border:2px solid #ffffffa6;background:#262944!important;color:white!important;box-shadow:0 10px 24px #0009,inset 0 0 0 4px #0b0d1b,inset 0 0 0 6px #ffffff28;font:950 32px/1 system-ui;letter-spacing:-1px;text-shadow:0 2px 6px #0009;transition:transform .16s ease,filter .16s ease}
.card:before{content:'';position:absolute;z-index:-2;inset:11px;border-radius:14px;background:var(--card-color,#777);box-shadow:inset 0 0 25px #0004}
.card:after{content:'CLASH';position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);font:950 12px system-ui;letter-spacing:2px;color:#ffffff40;border:2px solid #ffffff38;border-radius:50%;padding:20px 7px}
.card.red{--card-color:linear-gradient(145deg,#ff3f67,#a91652)}.card.yellow{--card-color:linear-gradient(145deg,#ffd84f,#d68b16);color:#fff!important}.card.green{--card-color:linear-gradient(145deg,#43e29a,#087e6e)}.card.blue{--card-color:linear-gradient(145deg,#45c8ff,#4554d9)}.card.wild{--card-color:conic-gradient(from 35deg,#ff416c,#ffd64a,#42e19a,#4d7fff,#ff416c)}
.card:hover,.card:active{transform:translateY(-12px) rotate(-2deg);filter:brightness(1.12)}
.hand{align-items:flex-end;gap:0;min-height:145px;padding:26px 25px 4px;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.hand::-webkit-scrollbar{display:none}.hand .card{flex:0 0 76px;width:76px;height:112px;margin-left:-15px;font-size:25px;transform-origin:50% 120%}.hand .card:first-child{margin-left:0}.hand .card:nth-child(odd){transform:rotate(-2deg)}.hand .card:nth-child(even){transform:rotate(2deg)}.hand .card:hover,.hand .card:active{transform:translateY(-18px) scale(1.06);z-index:20}
.turn-banner{justify-content:center;margin:14px 0 4px;font-size:15px}.status{text-align:center}.timer{max-width:520px;margin:8px auto 12px}.row button,#drawBtn{min-height:44px}
@media(max-width:700px){.wrap{padding:10px 10px 30px}header{padding:8px 4px 13px}.layout{margin-top:12px}.panel{padding:14px;border-radius:16px}.panel h1{font-size:32px}.room{gap:8px}.room button{min-width:72px}.game-top{align-items:flex-start}.players{display:grid;grid-template-columns:1fr 1fr}.player{min-width:0;overflow:hidden}.table{min-height:245px;gap:22px;border-radius:22px}.table .card{width:76px;height:110px;font-size:25px}.hand{justify-content:flex-start;margin:0 -14px;padding-left:30px;padding-right:30px}.hand .card{flex-basis:69px;width:69px;height:102px;margin-left:-18px}.game-chat{display:none}.rules{font-size:11px}.chat{height:210px}form input{font-size:16px}}
@media(max-width:390px){.players{grid-template-columns:1fr 1fr}.table{min-height:220px}.hand .card{flex-basis:62px;width:62px;height:94px;border-radius:15px;font-size:21px}.hand{min-height:125px}.card:after{font-size:9px;padding:15px 4px}}
@media(orientation:landscape) and (max-height:560px) and (pointer:coarse){header{display:none}.wrap{padding:4px}.game-top{position:absolute;z-index:10;top:6px;left:8px;right:8px}.game-top h2{font-size:15px}.game-top .eyebrow{display:none}.players{margin:4px 0;justify-content:center}.table{min-height:190px}.table .card{width:62px;height:90px}.rules,.game-chat{display:none}.hand{min-height:98px;padding-top:10px}.hand .card{height:82px;width:58px;flex-basis:58px}.turn-banner{margin:3px}.status{margin:2px;min-height:16px}.timer{margin:2px auto 4px}}