*{box-sizing:border-box}body{margin:0;background:#182026;color:#fff;font-family:Arial,sans-serif}header{padding:10px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:18px;margin:0}#info{margin-left:auto;font-size:22px;font-weight:800;text-align:right;line-height:1.1;padding:2px 0;white-space:nowrap}button,input,select{font:inherit}button{background:#2d3a44;color:#fff;border:1px solid #ffffff33;border-radius:7px;padding:7px 10px;cursor:pointer}button:hover{background:#40515e}.primary{background:#1677d2!important}.danger{background:#8b3030!important}button:disabled{opacity:.4;cursor:not-allowed}.setup{max-width:1200px;margin:0 auto 10px;padding:10px;background:#111820;border-radius:10px}.row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}input,select{background:#27313a;color:#fff;border:1px solid #ffffff33;border-radius:7px;padding:7px}#players{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.player{padding:5px 8px;background:#202a32;border-radius:7px;font-size:12px;display:flex;align-items:center;gap:5px}.player.me{outline:2px solid #ffd000}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px;padding:0 10px 12px}.board{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:10px;box-shadow:0 5px 25px #0008}.map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#hotspots{position:absolute;inset:0}.hotspot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;min-width:34px;padding:0;border:3px solid #fff;border-radius:50%;background:#777;color:#fff;font-size:0;line-height:1;text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #000b}.territoryName{display:none}.armyCount{display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border-radius:50%;background:transparent;color:#fff;font-size:15px;font-weight:700;line-height:1;text-shadow:0 1px 2px #000;box-shadow:none}.hotspot.selected{border-color:#fff;outline:5px solid #fff;outline-offset:3px;transform:translate(-50%,-50%) scale(1.22);z-index:20;box-shadow:0 0 0 2px #0008,0 0 12px #fff,0 1px 4px #000b}.hotspot.attackTarget{border-color:#ffb000;outline:2px solid #ffb000;outline-offset:1px}.hotspot.mine{box-shadow:0 0 0 1px #fff,0 1px 4px #000b}.side{background:#111820;border-radius:10px;padding:10px;overflow:auto;max-height:calc(100vh - 155px)}.side h2{font-size:15px;margin:0 0 7px}.card{background:#202a32;border-radius:8px;padding:8px;margin-bottom:8px;font-size:12px}.line{display:flex;justify-content:space-between;gap:6px;padding:3px 0;border-bottom:1px solid #ffffff12}.dice{font-size:23px;letter-spacing:3px;text-align:center;margin:5px 0}#log{font-size:11px;line-height:1.35;max-height:170px;overflow:auto}.hand{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}.cardItem{background:#f2f2f2;color:#111;border:2px solid #777;border-radius:7px;padding:5px 6px;font-size:11px;cursor:pointer;min-width:88px;text-align:center}.cardItem.selectedCard{border-color:#ffd000;box-shadow:0 0 0 2px #ffd000}.cardItem.jolly{background:#e8d7ff}.cardItem.fante{border-color:#8a8a8a}.cardItem.cannone{border-color:#8a8a8a}.cardItem.cavaliere{border-color:#8a8a8a}#attackBtn:not(:disabled){background:#b00000!important;color:#fff;border:3px solid #ff3030;box-shadow:0 0 10px #ff3030;font-weight:900;font-size:16px;animation:attackPulse 1s infinite}@keyframes attackPulse{0%,100%{box-shadow:0 0 6px #ff3030}50%{box-shadow:0 0 18px #ff3030}}#winnerBanner{display:none;position:fixed;z-index:1000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,1150px);max-height:92vh;overflow:auto;padding:30px 40px;background:#fff;border:8px solid #d00000;border-radius:24px;box-shadow:0 0 0 9999px #000b,0 0 40px #f00;text-align:center;color:#d00000;font-size:clamp(38px,6vw,82px);font-weight:900;line-height:1.05;text-transform:uppercase;}#winnerTitle{font-size:clamp(38px,6vw,82px);font-weight:900;line-height:1.02;color:#d00000;text-transform:uppercase}#winnerTitle span{font-size:.58em}#finalSummary{margin:20px auto 18px;color:#222;font-size:16px;text-align:left;max-width:950px}.finalReason{text-align:center;font-weight:800;color:#b00000;font-size:19px;margin-bottom:12px}.finalRows{border:2px solid #ddd;border-radius:10px;overflow:hidden}.finalRow{display:flex;justify-content:space-between;gap:15px;padding:9px 12px;background:#f7f7f7;border-bottom:1px solid #ddd}.finalRow span{font-weight:700}.finalObj{padding:5px 12px 9px;background:#fff;font-size:13px;color:#555;border-bottom:1px solid #ddd}#newGameFinal{background:#b00000!important;border:3px solid #ff3030;font-size:20px;font-weight:900;padding:11px 22px;box-shadow:0 0 12px #f33}
#identityBar{max-width:1200px;margin:0 auto 10px;padding:10px;background:#0e2f22;border:1px solid #2f6b4c;border-radius:10px}
#identityBar.notjoined{background:#3a2a10;border-color:#8a5a12}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.pill.you{background:#ffd000;color:#111}
.pill.turn{background:#1677d2;color:#fff}
.modalOverlay{display:none;position:fixed;inset:0;background:#000c;z-index:2000;align-items:center;justify-content:center}
.modalOverlay.open{display:flex}
.modalBox{background:#1b242c;border:1px solid #ffffff33;border-radius:12px;padding:20px;max-width:420px;width:92%;box-shadow:0 10px 40px #000a}
.modalBox h3{margin:0 0 10px;font-size:16px}
.modalBox p{font-size:13px;color:#cfd8de;margin:0 0 12px}
.modalBox input{width:100%;margin-bottom:14px}
.modalBtns{display:flex;justify-content:flex-end;gap:8px}
#syncStatus{font-size:11px;color:#9fb3c1}
.lockedHand{font-size:12px;color:#9fb3c1;padding:6px 0}
#panel{position:fixed;left:18px;bottom:16px;background:#10161de8;border:1px solid #ffffff33;border-radius:10px;padding:9px 12px;max-width:410px;backdrop-filter:blur(8px);font-size:12px}#panel b{font-size:13px}@media(max-width:800px){.layout{grid-template-columns:1fr}.side{max-height:none}}
.hintText{font-size:11px;color:#9fb3c1;line-height:1.4}
.modalErrorText{background:#4a1e1e;border:1px solid #8b3030;color:#ffb3b3;font-size:12px;padding:7px 9px;border-radius:7px;margin:-6px 0 12px}
#showFinalBtn{position:fixed;top:10px;right:14px;z-index:900;background:#b00000;border:2px solid #ff3030}
.attackBox{max-width:460px}
.attackArmies{display:flex;justify-content:space-between;gap:14px;font-size:14px;margin-bottom:14px;background:#111820;border-radius:9px;padding:10px 12px}
.attackArmies b{display:block;font-size:13px;margin-bottom:2px}
.diceChoiceRow{justify-content:center;gap:10px;margin-bottom:14px}
.diceChoiceRow button{min-width:52px;font-size:16px;font-weight:800}
.diceChoiceRow button.selectedDice{background:#1677d2;border-color:#7db8ff;box-shadow:0 0 0 2px #7db8ff}
.attackResult{text-align:center;font-size:46px;letter-spacing:6px;margin:8px 0 4px;min-height:56px}
.attackResultText{font-size:13px;letter-spacing:normal;color:#cfd8de;margin-top:6px}
.attackMoveArea p{font-size:13px;color:#cfd8de;margin:0 0 8px}
.attackMoveArea input{width:100%;margin-bottom:6px}
.summaryList{font-size:13px;line-height:1.6;max-height:280px;overflow:auto;margin-bottom:14px}
.summaryList div{padding:6px 0;border-bottom:1px solid #ffffff12}
.distReady{font-size:10px;padding:1px 6px;border-radius:999px;background:#1c5a33;margin-left:4px}
@media(max-width:800px){.layout{grid-template-columns:1fr}.side{max-height:none}}
@media(max-width:600px){
  .hotspot{width:20px;height:20px;min-width:20px;border-width:2px}
  .hotspot.selected{outline-width:3px;outline-offset:2px}
  .armyCount{font-size:9px}
  #info{font-size:16px}
  h1{font-size:14px}
  .modalBox{padding:14px}
}
.notifyActive{color:#3ddc84;font-weight:700;font-size:12px}
#pushBox{align-items:center;gap:10px}
.attackToast{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-16px);background:#1b242cf5;border:1px solid #ffffff33;border-radius:12px;padding:12px 24px;box-shadow:0 10px 30px #000a;z-index:1500;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease, background-color .2s ease;max-width:92vw}
.attackToast.outcome-conquest{background:#1c7a3cf5;border-color:#3ddc84}
.attackToast.outcome-win{background:#cdf3d6f5;border-color:#3ddc84}
.attackToast.outcome-win .attackToastTitle,.attackToast.outcome-win .attackToastText,.attackToast.outcome-win .attackToastDice{color:#0f4d24}
.attackToast.outcome-loss{background:#f8d3d3f5;border-color:#e06a6a}
.attackToast.outcome-loss .attackToastTitle,.attackToast.outcome-loss .attackToastText,.attackToast.outcome-loss .attackToastDice{color:#6e1a1a}
.attackToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.attackToastTitle{font-weight:800;font-size:13px;color:#cfd8de;margin-bottom:2px}
.attackToastDice{font-size:38px;letter-spacing:5px;margin:4px 0}
.attackToastText{font-size:12px;color:#cfd8de}
@media(max-width:600px){
  .attackResult{font-size:34px;letter-spacing:4px;min-height:44px}
  .attackToastDice{font-size:28px;letter-spacing:3px}
}
.chatToast{position:fixed;top:84px;left:50%;transform:translateX(-50%) translateY(-16px);background:#1b242cf5;border:1px solid #1677d2;border-radius:12px;padding:10px 22px;box-shadow:0 10px 30px #000a;z-index:1500;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;max-width:92vw}
.chatToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.chatToastTitle{font-weight:800;font-size:12px;color:#7db8ff;margin-bottom:2px}
.chatToastText{font-size:15px}
button.ruleActive{background:#1677d2!important;border-color:#7db8ff}