:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#15324a;background:#eaf7ff;--blue:#0f7cc2;--blue2:#43b8f5;--text:#15324a;--muted:#638097;--border:rgba(102,157,194,.28);--glass:rgba(255,255,255,.72);--shadow:0 18px 45px rgba(26,85,120,.13)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{padding:20px;background:radial-gradient(circle at 8% 8%,#fff 0,#eaf7ff 34%,transparent 55%),linear-gradient(160deg,#dff3ff,#f7fcff 55%,#e8f7ff);overflow-x:hidden;position:relative}
.bg-orb{position:fixed;border-radius:50%;filter:blur(30px);opacity:.33;pointer-events:none}.orb1{width:240px;height:240px;background:#65c9ff;top:30px;left:-80px}.orb2{width:300px;height:300px;background:#9bc7ff;right:-90px;top:140px}.orb3{width:220px;height:220px;background:#8ce8dd;left:28%;bottom:20px}
.shell{position:relative;z-index:1;max-width:1240px;margin:auto}.glass,.card,.panel,.topbar,.status{background:var(--glass);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--border);box-shadow:var(--shadow)}
.card{max-width:650px;margin:36px auto;padding:30px;border-radius:26px}.lobby-card{overflow:hidden}.eyebrow{font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#4c8cb5}.title-wrap h1{margin:5px 0 10px;font-size:2.3rem;line-height:1.08;color:#0a659e}.lead{line-height:1.65;color:var(--muted);margin:0 0 20px}
label{display:grid;gap:7px;margin:14px 0;font-weight:800}label span{font-size:.92rem}input,select,button{font:inherit;min-height:46px;border-radius:13px}input,select{width:100%;border:1px solid rgba(111,166,201,.48);padding:11px 13px;background:rgba(255,255,255,.88);color:var(--text);outline:none}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(15,124,194,.13)}
button{border:0;cursor:pointer;font-weight:850;transition:transform .17s ease,box-shadow .17s ease,filter .17s ease}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.02)}button:active:not(:disabled){transform:none}button:disabled{opacity:.46;cursor:not-allowed}.primary-btn,.secondary-btn,.roll{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 10px 24px rgba(15,124,194,.2)}.primary-btn,.secondary-btn{padding:11px 18px}.danger{background:linear-gradient(135deg,#c63b50,#e96778);color:#fff}.small{min-height:34px;padding:5px 10px;background:#edf8ff;color:#0b679e;border:1px solid #b9def3}
.actions,.joinrow,.topactions{display:flex;gap:10px;flex-wrap:wrap}.joinrow{margin-top:12px}.joinrow input{flex:1;min-width:170px;text-transform:uppercase}.note{color:var(--muted);margin:16px 0 0}.note.error{color:#b42318}.hidden{display:none!important}
.topbar{padding:14px 16px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.room-box{display:grid;gap:5px}.room-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:900}.room-code-wrap{display:flex;align-items:center;gap:9px}.room-code{font-size:1.45rem;letter-spacing:.15em;color:#0a659e}.status{margin:13px 0;padding:14px 16px;border-radius:18px;color:#0a659e;font-weight:900}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:15px}.board-panel{border-radius:22px;padding:15px}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.panel-header h2,.panel h2{margin:3px 0 0;font-size:1.08rem}.legend{display:flex;gap:7px;flex-wrap:wrap}.legend span{font-size:.78rem;background:rgba(255,255,255,.7);border:1px solid rgba(112,164,199,.24);padding:6px 9px;border-radius:999px}
.boardwrap{overflow:auto;border-radius:18px}.board{position:relative;display:grid;grid-template-columns:repeat(10,minmax(56px,1fr));gap:4px;min-width:660px;background:linear-gradient(135deg,#78bfe9,#9ddcf9);padding:6px;border-radius:18px;box-shadow:inset 0 0 18px rgba(255,255,255,.35)}
.cell{position:relative;z-index:1;aspect-ratio:1;border-radius:13px;background:linear-gradient(145deg,#fff,#eff9ff);padding:6px;font-size:11px;font-weight:900;overflow:visible;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 9px rgba(28,80,112,.08)}.cell:nth-child(odd){background:linear-gradient(145deg,#eaf8ff,#dff3ff)}.cell.finish{background:linear-gradient(145deg,#fff4b5,#ffe173)}.cell-number{position:relative;z-index:4;text-shadow:0 1px 1px rgba(255,255,255,.95)}
.game-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.ladder-rail{stroke:#85572a;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}.ladder-rung{stroke:#d89a51;stroke-width:4;stroke-linecap:round}.snake-body{fill:none;stroke-width:12;stroke-linecap:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}.snake-head{filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}.snake-0{stroke:#22a06b;fill:#22a06b}.snake-1{stroke:#db5163;fill:#db5163}.snake-2{stroke:#8b5cf6;fill:#8b5cf6}.snake-3{stroke:#e28a1f;fill:#e28a1f}.snake-eye{fill:#fff;stroke:#17324d;stroke-width:.8}
.tokens{position:absolute;z-index:5;left:3px;right:3px;bottom:3px;display:flex;flex-wrap:wrap;gap:3px;justify-content:center}.token{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;color:white;font-size:10px;font-weight:900;border:2px solid rgba(255,255,255,.96);box-shadow:0 3px 8px rgba(0,0,0,.13)}
.p0{background:#2563eb}.p1{background:#dc2626}.p2{background:#16a34a}.p3{background:#9333ea}.p4{background:#ea580c}.p5{background:#0891b2}.p6{background:#be123c}.p7{background:#4f46e5}.p8{background:#65a30d}.p9{background:#7c2d12}
.panel{padding:15px;border-radius:20px;margin-bottom:13px}.prow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid rgba(114,161,191,.2)}.prow:last-child{border-bottom:0}.prow.active{font-weight:900;color:#0a659e}.player-name{display:flex;align-items:center;gap:7px;min-width:0}.roll{width:100%;font-size:1.08rem;padding:12px}.dice{text-align:center;margin-top:11px;padding:16px 9px;border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(233,248,255,.9));border:1px solid rgba(112,164,199,.23);font-size:1.25rem;font-weight:900;color:#0a659e;min-height:68px;display:grid;place-items:center}.rules{line-height:1.5;color:var(--muted)}.rules p{margin:9px 0 0}
@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:650px){body{padding:10px}.card{margin:12px auto;padding:20px}.title-wrap h1{font-size:1.8rem}.board{min-width:580px}.topbar{padding:12px}.status{padding:12px}.legend{max-width:100%}}
.turn-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;margin-top:12px}.turn-step label{margin:0}.step-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e3f4ff;color:#08639b;font-weight:900;border:1px solid #b9def3}.reserve-step{align-items:end}.move-btn{width:100%;background:linear-gradient(135deg,#16a34a,#4ecb71);color:#fff;box-shadow:0 10px 24px rgba(22,163,74,.2);padding:12px;font-size:1.05rem}.move-btn:disabled{opacity:.46;box-shadow:none}