*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#04101f;color:#fff;font-family:Inter,Segoe UI,Arial,sans-serif}.app{position:relative;width:min(100vw,150vh);height:min(66.6667vw,100vh);margin:auto;overflow:hidden;background:#07182b;box-shadow:0 0 70px #000}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hud{position:absolute;z-index:20}.top{left:0;right:0;top:0;height:11.4%;display:flex;align-items:center;gap:.9%;padding:.55% 1.55%;background:linear-gradient(180deg,rgba(3,15,31,.97),rgba(3,20,39,.88),rgba(3,20,39,0))}.logo{width:24.5%;display:flex;align-items:center;gap:4%}.logo-house{width:17%;aspect-ratio:1;background:linear-gradient(#ffd86a,#ff8a1d);clip-path:polygon(50% 0,100% 40%,88% 40%,88% 100%,12% 100%,12% 40%,0 40%);filter:drop-shadow(0 0 13px rgba(255,175,55,.78))}.logo b{font-size:2.3vmin;letter-spacing:-.04em}.logo b i{font-style:normal;color:#ffcb52}.logo small{display:block;font-size:.77vmin;letter-spacing:.24em;margin-top:.26em;color:#d7e6f6}.players{width:67.5%;height:74%;display:grid;grid-template-columns:repeat(4,1fr);gap:.72%}.player{--c:#1aa9ff;border:2px solid var(--c);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,#0a2747),rgba(5,19,36,.96));display:flex;align-items:center;padding:2% 4%;gap:5%;box-shadow:0 0 22px color-mix(in srgb,var(--c) 18%,transparent),inset 0 0 24px #0005;transition:.2s}.player.active{transform:translateY(-2px);box-shadow:0 0 28px color-mix(in srgb,var(--c) 58%,transparent),inset 0 0 18px #0004}.avatar{width:26%;aspect-ratio:1;border-radius:50%;border:3px solid color-mix(in srgb,var(--c) 70%,white);background:linear-gradient(#f8c58c,#cc8659);position:relative;overflow:hidden;box-shadow:0 0 18px #0007 inset}.avatar:before{content:"";position:absolute;left:15%;top:8%;width:70%;height:35%;border-radius:60% 60% 40% 40%;background:#162338}.avatar:after{content:"";position:absolute;left:8%;bottom:-18%;width:84%;height:45%;border-radius:50% 50% 0 0;background:var(--c)}.pname{font-size:1.05vmin;font-weight:900;color:var(--c);line-height:1}.pscore{font-size:1.7vmin;font-weight:900;margin-top:.25em}.topBtns{width:6.7%;display:flex;gap:10%}.topBtns button{width:46%;aspect-ratio:1;border:1px solid #355f84;background:#08294b;color:#fff;border-radius:14px;font-size:1.55vmin;font-weight:900;cursor:pointer;box-shadow:inset 0 0 14px #0004}.turn{position:absolute;z-index:22;left:50%;top:11%;transform:translateX(-50%);background:#051627ee;border:1px solid #4c7fa6aa;border-radius:999px;padding:.5% 1.08%;font-size:.84vmin;font-weight:800;box-shadow:0 8px 24px #0006}.bottom{left:2%;right:2%;bottom:2%;height:9.55%;display:flex;align-items:center;gap:.95%;padding:.7% 1.05%;border:1px solid #3a6488;border-radius:21px;background:linear-gradient(#062f54ee,#041a34fa);box-shadow:0 12px 36px #0008}.ctrl{height:100%;width:28%;display:flex;flex-direction:column;justify-content:center}.ctrl label{font-size:.76vmin;color:#c0d5ea;margin:0 0 .35em .45em}.seg{height:53%;display:flex;gap:2%}.seg button{flex:1;border:1px solid #355f86;background:#082b51;color:#fff;border-radius:12px;font-size:.94vmin;font-weight:800;cursor:pointer}.seg button.active{background:#0a84ff;border-color:#57c9ff;box-shadow:0 0 17px #0a8fff88}.seg button:disabled{opacity:.42;cursor:not-allowed}.start{height:70%;min-width:20.4%;border:2px solid #ffd46c;border-radius:17px;background:linear-gradient(#ffd45f,#f39a17);color:#2a1902;font-size:1.3vmin;font-weight:900;cursor:pointer;box-shadow:0 0 22px #ffb42d88}.minor{height:60%;border:1px solid #355f86;background:#092c52;color:#fff;border-radius:12px;padding:0 1.2em;font-size:.97vmin;font-weight:800;cursor:pointer}.toast{position:absolute;z-index:30;left:50%;top:15.4%;transform:translateX(-50%);background:#03101eea;border:1px solid #4b7ca599;border-radius:999px;padding:.55% 1%;font-size:.84vmin;font-weight:800;opacity:0;transition:.2s}.toast.show{opacity:1}.modal{position:absolute;z-index:40;inset:0;display:grid;place-items:center;background:#010811aa;backdrop-filter:blur(5px)}.modal[hidden]{display:none}.modalCard{min-width:300px;width:min(30vw,420px);background:linear-gradient(#0d3156,#06172e);border:1px solid #487ba4;border-radius:22px;padding:28px;text-align:center;box-shadow:0 30px 90px #000}.cup{font-size:3rem;color:#ffd04c}.modalCard h2{margin:.2em}.modalCard p{color:#cad9e8}@media(max-width:900px){.logo b{font-size:2.1vw}.logo small{font-size:.72vw}.pname{font-size:1vw}.pscore{font-size:1.55vw}.ctrl label{font-size:.72vw}.seg button,.minor{font-size:.9vw}.start{font-size:1.15vw}.turn,.toast{font-size:.92vw}}