:root{color-scheme:dark;--bg:#0c1126;--panel:#1a2240;--panel2:#222d50;--line:#334166;--text:#f6f8ff;--soft:#aab8da;--mint:#42e8c5;--pink:#fa78aa;--yellow:#ffd271;--indigo:#8587ff;--red:#ff7586;--shadow:0 19px 50px rgba(2,7,25,.25);font-family:Tahoma,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 20% 0%,#1e3153 0%,transparent 36%),radial-gradient(ellipse at 85% 30%,#25204a 0%,transparent 31%),var(--bg);color:var(--text);overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:var(--mint);text-decoration:none}.wrap{width:min(1190px,calc(100% - 32px));margin-inline:auto}.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.12;pointer-events:none}.ambient-a{background:#1bccaa;width:280px;height:280px;right:-120px;top:25%}.ambient-b{background:#9549f6;width:260px;height:260px;left:-100px;bottom:10%}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0 15px;gap:12px}.brand{display:flex;align-items:center;gap:10px}.brand-icon{display:grid;place-items:center;background:linear-gradient(135deg,#444fb3,#7168f5);border:1px solid #8c83ff;border-radius:15px;width:48px;height:48px;font-size:25px;box-shadow:0 5px 0 #363675}.brand strong{font-size:23px;font-weight:900;display:block}.brand small{display:block;font-size:11px;color:var(--soft);margin-top:3px}.online{display:flex;gap:8px;align-items:center;color:var(--soft);font-size:12px}.online i{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px #ffdb7140}.online.connected i{background:var(--mint);box-shadow:0 0 0 4px #42e8c533}.footer{color:#8494b5;text-align:center;font-size:12px;padding:40px 0 25px}
main{min-height:calc(100vh - 170px)}.surface{background:linear-gradient(150deg,#202b4d,#19213e);border:1px solid #384766;border-radius:25px;box-shadow:var(--shadow)}.surface-light{background:#202b4b;border:1px solid var(--line);border-radius:18px}.glow{color:var(--mint)}.muted{color:var(--soft)}.tiny{font-size:12px}.eyebrow{color:var(--mint);font-weight:800;letter-spacing:.4px;font-size:13px}.highlight{color:var(--yellow)}.heading{font-weight:900;font-size:clamp(27px,3.9vw,52px);line-height:1.27;letter-spacing:-1px;margin:12px 0 16px}.lead{font-size:15px;line-height:2;color:#bbcae6;max-width:580px}.grid-home{display:grid;grid-template-columns:1fr .9fr;gap:26px;padding-top:40px}.intro{display:flex;flex-direction:column;justify-content:center}.intro-banner{margin-top:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mini-tag{background:#1c2949;border:1px solid #344667;padding:9px 11px;border-radius:30px;color:#c3cfea;font-size:12px}.home-art{margin-top:32px;min-height:245px;border-radius:24px;position:relative;overflow:hidden;background:radial-gradient(circle at center,#41457c 0%,#252958 42%,#171f3b 100%);border:1px solid #434b82;display:flex;align-items:center;justify-content:center;isolation:isolate}.home-art:before{content:'';position:absolute;inset:16px;border:2px dashed #7d8add38;border-radius:18px}.art-board{position:absolute;width:330px;height:330px;transform:rotate(-21deg) skew(5deg,2deg);background:conic-gradient(#5d82be 25%,#5ce2cb 0 50%,#ffcc7c 0 75%,#fb83af 0) 0 0/82px 82px;border:10px solid #edf1ff;border-radius:15px;box-shadow:15px 20px 0 #0c1332,20px 30px 50px #050b21aa;opacity:.7}.art-icon{position:absolute;font-size:67px;filter:drop-shadow(5px 14px 4px #03071670)}.art-icon.one{right:20%;top:14%;transform:rotate(15deg)}.art-icon.two{left:20%;bottom:10%;transform:rotate(-15deg)}.art-icon.three{right:40%;bottom:16%}
.home-card{padding:30px}.home-card h2{margin:0 0 8px;font-size:25px}.home-card p{color:var(--soft);font-size:13px;line-height:1.8}.form-label{display:block;font-weight:800;font-size:13px;margin:22px 0 10px}.input,.select{width:100%;outline:none;color:#f4f8ff;background:#0d1731;border:1px solid #394a70;border-radius:13px;padding:13px 15px;min-height:48px}.input:focus,.select:focus{border-color:var(--mint);box-shadow:0 0 0 3px #42e8c522}.input::placeholder{color:#7485a9}.avatar-list{display:flex;flex-wrap:wrap;gap:9px}.avatar-option{border-radius:17px;border:2px solid transparent;background:#111d39;padding:8px 6px;width:70px;color:var(--soft);font-size:11px}.avatar-option.selected{border-color:var(--mint);background:#213f55;color:white;box-shadow:0 0 0 3px #42e8c51a}.avatar-emoji{display:grid;place-items:center;width:44px;height:44px;margin:auto auto 6px;border-radius:50%;font-size:29px;background:radial-gradient(circle at 35% 20%,#c9e5ff,#6773cc 50%,#383e79);box-shadow:inset -4px -6px 7px #18234b80,0 5px 0 #0d152f}.avatar-option:nth-child(2) .avatar-emoji{background:linear-gradient(160deg,#ffe1b0,#d6866c)}.avatar-option:nth-child(3) .avatar-emoji{background:linear-gradient(160deg,#a3f5fc,#508ca4)}.avatar-option:nth-child(4) .avatar-emoji{background:linear-gradient(160deg,#e9e6ff,#9490ad)}.avatar-option:nth-child(5) .avatar-emoji{background:linear-gradient(160deg,#a6eaaa,#4b947d)}.avatar-option:nth-child(6) .avatar-emoji{background:linear-gradient(160deg,#d4b2ff,#735bb2)}.divider{height:1px;background:#344261;margin:22px 0}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:13px;border:1px solid transparent;min-height:48px;padding:11px 18px;font-weight:900;transition:transform .12s,filter .12s}.btn:not(:disabled):active{transform:translateY(3px)}.btn-primary{color:#082a2b;background:linear-gradient(110deg,#71f2cf,#3cd5ba);box-shadow:0 5px 0 #148e81}.btn-purple{color:#fff;background:linear-gradient(110deg,#666cf1,#9875f5);box-shadow:0 5px 0 #3d3e91}.btn-secondary{color:#e9efff;background:#2d3a5d;border:1px solid #52628b}.btn-outline{color:#d8e3ff;background:transparent;border:1px solid #52628b}.btn-danger{color:#ffd1d4;background:#6b2d48;border:1px solid #b14c69}.btn-wide{width:100%}.join-row{display:flex;gap:9px}.join-row .input{flex:1;min-width:0;text-transform:uppercase;direction:ltr;text-align:center;letter-spacing:2px;font-size:17px;font-weight:900}.form-error{color:#ff91a0;font-size:12px;padding:8px 0}
.page-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:18px 0 21px;flex-wrap:wrap}.page-top h1{margin:0;font-size:clamp(24px,4vw,34px)}.page-top p{margin:8px 0 0;color:var(--soft);font-size:13px}.code-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.room-code{font-size:24px;font-weight:900;letter-spacing:4px;direction:ltr;color:var(--yellow);padding:10px 18px;background:#1e2c4e;border:1px dashed #7d83c1;border-radius:13px}.columns-lobby{display:grid;grid-template-columns:.77fr 1.23fr;gap:18px;align-items:start}.panel{padding:24px}.panel h2{font-size:19px;margin:0 0 18px}.players{display:grid;gap:11px}.player-row{display:flex;align-items:center;gap:11px;border:1px solid #36486e;background:#182543;border-radius:15px;padding:10px}.player-row.you{border-color:#4dbfae}.player-avatar{width:47px;height:47px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(145deg,#6771c1,#334275);border-radius:16px;font-size:29px;box-shadow:0 5px 0 #0e1633}.player-info{min-width:0;flex:1}.player-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-info small{color:var(--soft);display:block;margin-top:5px;font-size:11px}.pill{padding:5px 8px;border-radius:50px;background:#2e395d;border:1px solid #4c5b7f;color:#cad7ef;font-size:11px;white-space:nowrap}.pill.ok{background:#19473c;border-color:#2a9b7a;color:#a5ffe4}.pill.bad{background:#58304b;border-color:#985068;color:#ffbacd}.avatars-small{display:flex;gap:6px;flex-wrap:wrap}.avatars-small .avatar-option{width:61px;padding:5px 2px}.avatars-small .avatar-emoji{width:35px;height:35px;font-size:23px}
details.settings-group{background:#15223f;border:1px solid #39486f;border-radius:14px;margin:11px 0;overflow:hidden}details.settings-group summary{list-style:none;font-weight:900;padding:18px;display:flex;justify-content:space-between;cursor:pointer}details.settings-group summary::-webkit-details-marker{display:none}details.settings-group summary:after{content:'⌄';color:var(--mint);font-size:20px;line-height:15px}details[open].settings-group summary:after{transform:rotate(180deg)}.settings-inner{padding:0 17px 15px}.setting-item{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #303f61}.setting-item:last-child{border:0}.setting-item span{font-size:13px;color:#d7e2fd}.setting-item .select{min-height:40px;padding:7px 9px;font-size:12px}.setting-note{font-size:11px;line-height:1.9;color:var(--soft);margin:10px 0}.weapon-types{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:8px}.check-item{font-size:12px;display:flex;gap:8px;align-items:center;color:#d9e4f9;background:#212e50;border-radius:10px;padding:10px}.check-item input{accent-color:#46dcb9;width:17px;height:17px}.locked{opacity:.48;pointer-events:none}.lobby-actions{margin-top:20px}.hint{font-size:12px;color:var(--soft);line-height:1.8;margin:13px 0}
.game-screen{padding:10px 0 0}.game-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:13px 0 18px}.game-heading{font-size:24px;margin:0 0 6px}.game-meta{display:flex;gap:7px;flex-wrap:wrap}.game-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(285px,.75fr);gap:17px;align-items:start}.board-panel{padding:16px}.board-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.board-top strong{font-size:15px}.board-top .pill{font-size:12px}.board{display:grid;direction:ltr;gap:3px;background:#10182b;border:5px solid #6078a5;border-radius:13px;padding:5px;box-shadow:0 7px 0 #131b39,0 16px 35px #030a20bb;aspect-ratio:1;width:100%}.cell{position:relative;display:flex;justify-content:space-between;align-items:stretch;flex-direction:column;overflow:hidden;aspect-ratio:1;border:0;border-radius:5px;padding:3px 2px 1px;min-width:0;min-height:0;background:#e4ecff;color:#1a3255;box-shadow:inset 0 -3px 0 #0000001c}.cell:nth-child(4n+1){background:#bbf5e7}.cell:nth-child(4n+2){background:#f9e3ae}.cell:nth-child(4n+3){background:#e8d7fa}.cell.active{outline:3px solid #ffb832;outline-offset:-2px;z-index:1;box-shadow:0 0 14px #fdb936c0}.cell.finish{background:#ffd26f}.cell.trappable:hover{outline:2px solid #4dccba;outline-offset:-2px;z-index:1}.cell-num{font-size:clamp(7px,1.35vw,12px);font-weight:900;line-height:1;text-align:left}.cell-icon{font-size:clamp(10px,2.35vw,23px);line-height:1;align-self:center;text-shadow:0 2px 2px #0002}.cell-tokens{display:flex;align-self:center;gap:0;position:absolute;bottom:0;left:0;right:0;justify-content:center}.token{font-size:clamp(12px,2vw,21px);filter:drop-shadow(1px 2px 1px #1117);margin:0 -3px;animation:pop .3s ease both}.cell .flag{align-self:center;font-size:clamp(11px,2vw,20px)}@keyframes pop{from{transform:translateY(-10px) scale(.65);opacity:.4}to{transform:translateY(0) scale(1);opacity:1}}.board-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:17px;color:var(--soft);font-size:11px}.legend-point{display:flex;align-items:center;gap:3px}
.sidebar{display:grid;gap:16px}.status-panel,.equipment,.log-panel{padding:20px}.turn-banner{display:flex;justify-content:space-between;align-items:center;gap:10px}.turn-banner strong{font-size:18px}.clock{border-radius:13px;background:#2f3b61;padding:11px 12px;text-align:center;min-width:75px;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--yellow)}.clock.urgent{color:#ff8494;background:#51263d}.dice-container{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:14px}.dice-icon{font-size:80px;line-height:1;color:white;text-shadow:0 6px 0 #9397b5,0 12px 14px #030613aa}.dice-icon.roll-animated{animation:wobble .45s ease}@keyframes wobble{0%{transform:rotate(-14deg) scale(.8)}50%{transform:rotate(16deg) scale(1.1)}100%{transform:rotate(0deg) scale(1)}}.dice-container .btn{flex:1}.turn-note{font-size:12px;color:var(--soft);margin:14px 0 0}.score-list{display:grid;gap:8px;margin-top:12px}.score-row{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:8px;background:#182640;padding:8px 10px;border:1px solid #344666;border-radius:12px}.score-row.is-turn{border-color:#e4c267;background:#343957}.score-avatar{font-size:23px}.score-row .name{font-weight:800;font-size:13px}.score-row .detail{color:#9fb1d1;font-size:11px}.score-row .pos{color:#a7ffe1;font-weight:900;font-size:12px}.equipment h3,.log-panel h3{margin:0 0 12px;font-size:16px}.item-list{display:grid;gap:8px}.item{background:#1a2948;border:1px solid #3c4e73;border-radius:11px;padding:10px;display:flex;align-items:center;gap:10px}.item .emoji{font-size:24px}.item .item-title{flex:1;min-width:0}.item .item-title strong{font-size:13px;display:block}.item .item-title small{color:var(--soft);font-size:10px}.small-btn{padding:7px 10px;border-radius:9px;background:#3a4b72;color:#edf7ff;border:1px solid #657497;font-size:11px;font-weight:800;white-space:nowrap}.small-btn:disabled{opacity:.35}.small-btn.danger{background:#522c4c;color:#ffd4e0}.weapon-control{display:grid;gap:8px;margin:12px 0}.logs{display:grid;gap:8px;max-height:265px;overflow:auto}.log{font-size:12px;line-height:1.8;border-bottom:1px solid #2e3d60;padding-bottom:7px;color:#cbd8f1}.log:last-child{border:0}.badge-winner{background:linear-gradient(110deg,#453e75,#174d4c);border:1px solid #8adbc8;border-radius:16px;padding:15px;color:#ffe19c;text-align:center;font-size:19px;font-weight:900}.winner-hero{text-align:center;padding:42px 22px}.winner-hero .winner-emoji{font-size:100px;display:block;filter:drop-shadow(0 14px 6px #060d28)}.winner-hero h1{font-size:40px;margin:13px 0}.winner-hero p{color:var(--soft)}.toast{position:fixed;bottom:24px;left:50%;z-index:100;transform:translate(-50%,22px);background:#ffe9aa;color:#1b2846;border:1px solid #fff2bf;max-width:calc(100% - 24px);padding:13px 18px;border-radius:13px;font-size:13px;font-weight:900;box-shadow:0 15px 35px #050b24aa;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}.need-trap{padding:10px;background:#40375e;color:#f9ddff;border:1px solid #9377b5;border-radius:12px;font-size:12px}
@media(min-width:1250px){.cell-icon{font-size:25px}.token{font-size:24px}}
@media(max-width:950px){.grid-home{grid-template-columns:1fr;gap:18px;padding-top:18px}.intro{max-width:690px}.home-art{min-height:180px}.columns-lobby{grid-template-columns:1fr}.game-wrap{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.status-panel{grid-column:1/-1}.dice-container{justify-content:center}.board{max-width:720px;margin:auto}}
@media(max-width:560px){.wrap{width:min(100% - 18px,460px)}.topbar{padding:15px 0}.brand strong{font-size:18px}.brand-icon{width:39px;height:39px;font-size:21px}.online{font-size:10px}.grid-home{padding-top:5px}.heading{font-size:32px}.home-art{min-height:155px}.art-board{width:230px;height:230px}.art-icon{font-size:46px}.home-card,.panel{padding:18px}.avatars-small .avatar-option{width:57px}.avatar-option{width:61px;padding:5px 3px}.avatar-emoji{width:39px;height:39px;font-size:24px}.room-code{font-size:18px;letter-spacing:2px}.page-top{margin:10px 0 16px}.setting-item{grid-template-columns:1fr;gap:5px}.settings-inner{padding:0 12px 12px}.sidebar{grid-template-columns:1fr}.game-head{margin-top:5px}.game-heading{font-size:20px}.board-panel{padding:7px}.board{gap:2px;padding:3px;border-width:3px;border-radius:9px}.cell{padding:2px 1px 0;border-radius:3px;box-shadow:inset 0 -1px 0 #0002}.cell-num{font-size:8px}.cell-icon{font-size:13px}.token{font-size:14px;margin:0 -4px}.status-panel,.equipment,.log-panel{padding:17px}.dice-icon{font-size:65px}.footer{padding:30px 0 15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}