*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
body{background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);color:#fff;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.container{max-width:1200px;width:100%;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;padding:0 10px}
.header-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background-color:rgba(0,0,0,.4);border-radius:0 0 12px 12px;box-shadow:0 3px 10px rgba(0,0,0,.3);margin-bottom:10px;position:sticky;top:0;z-index:100}
.title-section{display:flex;align-items:center;gap:10px}
h1{font-size:1.2rem;text-shadow:1px 1px 3px rgba(0,0,0,.5);background:linear-gradient(to right,#00dbde,#fc00ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.icon-buttons{display:flex;gap:12px}
.icon-btn{background:rgba(255,255,255,.1);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;color:#fff;font-size:1.1rem}
.icon-btn:hover{background:rgba(0,219,222,.3);transform:scale(1.08)}

.hidden{display:none!important}

.panel{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0}
.panel-card{width:min(560px,95vw);background:linear-gradient(145deg,#1c2833,#2c3e50);border-radius:12px;padding:22px;border:2px solid #00dbde;box-shadow:0 10px 25px rgba(0,0,0,.45)}
.panel-title{font-size:1.2rem;margin-bottom:14px;color:#00dbde;display:flex;align-items:center;gap:10px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
label{font-weight:600;color:#00dbde;font-size:1rem;text-align:left}
input{padding:12px;border-radius:8px;border:2px solid #444;background-color:rgba(255,255,255,.92);font-size:1rem;transition:all .2s;color:#222}
input:focus{outline:none;border-color:#00dbde;box-shadow:0 0 8px rgba(0,219,222,.5)}
textarea{padding:12px;border-radius:8px;border:2px solid #444;background-color:rgba(255,255,255,.92);font-size:.95rem;transition:all .2s;color:#222;resize:vertical}
textarea:focus{outline:none;border-color:#00dbde;box-shadow:0 0 8px rgba(0,219,222,.5)}
.panel-note{margin-top:10px;color:rgba(255,255,255,.8);line-height:1.4}
.divider{height:1px;background:rgba(255,255,255,.12);margin:12px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.game-board{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:1;padding-bottom:10px}
.top-info{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:8px 0 12px}
.chip{padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(0,219,222,.25);color:rgba(255,255,255,.92)}

.announcement{font-size:.95rem;text-align:center;padding:12px;background-color:rgba(0,0,0,.3);border-radius:10px;margin-bottom:12px;width:100%;max-width:560px;height:76px;display:flex;align-items:center;justify-content:center;color:#00dbde;font-weight:600;line-height:1.25;border:2px solid rgba(0,219,222,.2);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}

.board-container{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;width:100%;max-width:450px;aspect-ratio:1/1;margin-bottom:14px;user-select:none}
.board-box{background-color:rgba(0,0,0,.4);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;transition:all .25s;box-shadow:0 4px 10px rgba(0,0,0,.3);cursor:default;position:relative;overflow:hidden;border:2px solid transparent}
.board-box.player{cursor:pointer}
.board-box:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.4)}
.board-box.center{background:linear-gradient(145deg,#1c2833,#2c3e50);border:3px solid #00dbde}
.box-player{font-size:1.05rem;font-weight:700;margin-bottom:6px;color:#fff}
.box-sub{font-size:.85rem;font-weight:600;min-height:20px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9)}
.tag{padding:4px 8px;border-radius:6px;width:95%;font-size:.85rem}
.raja{color:#ffcc00;background-color:rgba(255,204,0,.15)}
.mantri{color:#00cc66;background-color:rgba(0,204,102,.15)}
.chor{color:#ff3333;background-color:rgba(255,51,51,.15)}
.sipahi{color:#3399ff;background-color:rgba(51,153,255,.15)}

.selectable{border-color:#ffcc00;animation:pulse-select 1.5s infinite}
@keyframes pulse-select{0%{box-shadow:0 0 0 0 rgba(255,204,0,.35)}70%{box-shadow:0 0 0 8px rgba(255,204,0,0)}100%{box-shadow:0 0 0 0 rgba(255,204,0,0)}}

.game-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:560px;margin-top:4px}
.btn{padding:12px 18px;border:none;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:8px;min-width:140px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(to right,#00dbde,#0099cc);color:#fff}
.btn-secondary{background:linear-gradient(to right,#00cc66,#00994d);color:#fff}
.btn-warning{background:linear-gradient(to right,#ffcc00,#ff9900);color:#fff}
.btn-danger{background:linear-gradient(to right,#ff3333,#cc0000);color:#fff}
.btn-primary:hover:not(:disabled),.btn-secondary:hover:not(:disabled),.btn-warning:hover:not(:disabled),.btn-danger:hover:not(:disabled){transform:scale(1.03)}

/* Modal (Settings) */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.modal.active{opacity:1;visibility:visible}
.modal-content{background:linear-gradient(145deg,#1c2833,#2c3e50);border-radius:12px;padding:18px;max-width:560px;width:92%;text-align:left;box-shadow:0 10px 25px rgba(0,0,0,.5);border:2px solid #00dbde;max-height:90vh;overflow-y:auto}
.modal-title{font-size:1.15rem;margin-bottom:12px;color:#00dbde;display:flex;align-items:center;gap:10px;font-weight:800}

.call-status{display:flex;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;background:rgba(0,0,0,.22);font-weight:700}
.peer-list{display:flex;flex-direction:column;gap:8px}
.peer-pill{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(0,219,222,.18)}
.peer-pill .peer-name{font-weight:800}
.peer-pill .peer-state{font-size:.9rem;color:rgba(255,255,255,.75)}

.settings-grid{display:flex;flex-direction:column;gap:10px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:10px;background:rgba(0,0,0,.22)}
.setting-label{font-weight:700;color:rgba(255,255,255,.92)}
.range-wrap{display:flex;align-items:center;gap:10px;min-width:240px;justify-content:flex-end}
.range-value{min-width:52px;text-align:right;font-weight:900;color:#00dbde}

/* Switch */
.switch{position:relative;display:inline-block;width:50px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s;border-radius:24px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:white;transition:.2s;border-radius:50%}
input:checked + .slider{background-color:#00dbde}
input:checked + .slider:before{transform:translateX(26px)}

.score-card{width:min(560px,95vw);background:rgba(0,0,0,.28);border:1px solid rgba(0,219,222,.25);border-radius:12px;padding:14px;margin-top:12px}
.score-title{color:#00dbde;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.score-list{display:flex;flex-direction:column;gap:8px}
.score-row{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;background:rgba(0,0,0,.22)}
.score-left{display:flex;flex-direction:column;gap:2px}
.score-name{font-weight:700}
.score-role{font-size:.85rem;color:rgba(255,255,255,.75)}
.score-points{font-weight:900;color:#00dbde}

footer{text-align:center;color:rgba(255,255,255,.6);font-size:.8rem;padding:10px;margin-top:auto}

@media (max-width:480px){
  .grid2{grid-template-columns:1fr}
  .btn{width:100%;max-width:320px}
  h1{font-size:1.05rem}
  .icon-btn{width:34px;height:34px}
  .board-container{gap:7px;max-width:95vw}
  .announcement{font-size:.88rem;height:72px;padding:10px;line-height:1.2}
}