:root{--navy:#031422;--panel:rgba(7,40,63,.82);--panel2:rgba(10,55,82,.9);--cyan:#34d4e8;--gold:#ffd34d;--green:#2bd66f;--muted:#a9c5d8;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:#fff}
body{min-height:100vh;background:
radial-gradient(circle at 12% 15%,rgba(18,160,194,.28),transparent 27%),
radial-gradient(circle at 88% 85%,rgba(70,51,196,.22),transparent 28%),
linear-gradient(145deg,#03111d,#07324a 55%,#041624);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:
linear-gradient(30deg,transparent 48%,rgba(255,255,255,.08) 49%,transparent 50%),
linear-gradient(150deg,transparent 48%,rgba(255,255,255,.05) 49%,transparent 50%);background-size:80px 80px}
button,input{font:inherit}.app{width:min(1500px,96vw);margin:auto;padding:18px 0 28px;position:relative}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.logo{font-size:clamp(28px,3.2vw,46px);font-weight:950;letter-spacing:-1.5px}.logo b{color:var(--cyan)}.tagline{color:var(--muted);font-size:13px}
.pill{background:rgba(0,0,0,.22);border:1px solid var(--line);padding:9px 13px;border-radius:999px;color:#d8ecf8}
.panel{background:linear-gradient(160deg,rgba(11,57,84,.92),rgba(5,31,51,.9));border:1px solid var(--line);box-shadow:0 22px 70px rgba(0,0,0,.32);border-radius:26px;padding:24px;backdrop-filter:blur(16px)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch}.hero h1{font-size:clamp(34px,5vw,68px);line-height:.98;margin:8px 0 14px;letter-spacing:-2px}.hero p{color:#bfd5e3;max-width:650px;line-height:1.55}
.deco{min-height:280px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(44,213,232,.14),rgba(255,211,77,.09));border-radius:22px;border:1px solid var(--line)}
.cardfan{position:absolute;inset:0;display:grid;place-items:center}.fakecard{position:absolute;width:135px;height:190px;border-radius:18px;border:5px solid #fff;box-shadow:0 20px 45px #0008;display:grid;place-items:center;font-size:52px;font-weight:950}.c1{background:#ef5350;transform:translateX(-75px) rotate(-15deg)}.c2{background:#3b82f6;transform:translateX(0) rotate(0)}.c3{background:#f5c542;color:#112;transform:translateX(75px) rotate(15deg)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.btn{border:0;border-radius:15px;padding:14px 19px;font-weight:900;cursor:pointer;transition:.18s}.btn:hover{transform:translateY(-1px)}.primary{background:linear-gradient(135deg,#ffe36a,#ffbd31);color:#13202a}.cyan{background:linear-gradient(135deg,#5ce8f2,#24bed8);color:#06202b}.ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--line)}.danger{background:#ef5350;color:white}
.setup{margin-top:18px}.setup-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.setup h2{margin:0;font-size:24px}.formrow{display:grid;grid-template-columns:1fr auto auto;gap:12px;margin-top:18px}.nameinput{width:100%;background:#031522;color:white;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 15px;outline:none}.nameinput:focus{border-color:var(--cyan)}
.cameraLabel{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.25);padding:13px 16px;border-radius:14px;font-weight:800;cursor:pointer}.cameraLabel input{display:none}
.players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:18px}.player{position:relative;min-height:205px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#0c5272,#08283e);border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 30px #0004;text-align:center;padding:14px}.avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.9);background:#173e55;margin:auto;display:grid;place-items:center;font-size:40px}.pname{font-weight:950;font-size:19px;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage{color:var(--gold);font-weight:900;margin-top:4px}.remove{position:absolute;right:8px;top:8px;width:28px;height:28px;border:0;border-radius:50%;background:#0008;color:#fff;cursor:pointer}
.gamehead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-bottom:16px}.roundbox{text-align:center}.roundbox small{color:var(--muted);font-weight:800}.roundbox strong{display:block;font-size:34px}.tvbox{text-align:right}.tvcode{font-size:28px;font-weight:950;color:var(--gold);letter-spacing:4px}.gameactions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.complete{outline:3px solid var(--green);box-shadow:0 0 28px rgba(43,214,111,.28)}.check{position:absolute;left:10px;top:10px;background:var(--green);width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-weight:950}
.modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;padding:18px;z-index:20}.modal.show{display:flex}.modalcard{width:min(850px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(160deg,#0b3a58,#061d31);border:1px solid var(--line);border-radius:25px;padding:24px;box-shadow:0 30px 100px #000a}.modalplayers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}.choice{background:#08283e;border:1px solid var(--line);border-radius:15px;padding:12px;color:white;text-align:center;cursor:pointer}.choice.on{background:#0d663f;border-color:#45e98b}.choice img{width:58px;height:58px;border-radius:50%;object-fit:cover}.choice strong{display:block;margin-top:6px}
.hidden{display:none!important}.hint{color:var(--muted);font-size:13px}.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:20px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.deco{min-height:220px}.players{grid-template-columns:repeat(3,1fr)}.modalplayers{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.app{width:94vw}.topbar{align-items:flex-start}.pill{display:none}.panel{padding:17px;border-radius:20px}.formrow{grid-template-columns:1fr 1fr}.nameinput{grid-column:1/-1}.players{grid-template-columns:repeat(2,1fr)}.modalplayers{grid-template-columns:repeat(2,1fr)}.player{min-height:180px}.avatar{width:86px;height:86px}.gamehead{grid-template-columns:1fr}.tvbox{text-align:center}.gameactions{justify-content:center}}
@media(orientation:landscape) and (max-height:600px){.app{padding:8px 0}.topbar{margin-bottom:8px}.panel{padding:14px}.players{gap:9px}.player{min-height:145px;padding:9px}.avatar{width:72px;height:72px}.pname{font-size:16px}.hero{display:none}}