#hcLudoGame{position:fixed;inset:0;z-index:2147483500;background:linear-gradient(180deg,#061b38,#020b1b);color:#fff;overflow:auto;font-family:inherit;padding:calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));box-sizing:border-box}
#hcLudoGame *{box-sizing:border-box}.lg-wrap{width:min(100%,720px);min-height:100%;margin:auto;display:flex;flex-direction:column}.lg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.lg-round{width:43px;height:43px;border-radius:50%;border:1px solid #506582;background:#102745;color:#fff;font-size:25px}.lg-title{text-align:center}.lg-title b{display:block;color:#ffd052;letter-spacing:2px}.lg-title small{color:#aebbd0}.lg-score{display:flex;justify-content:space-between;align-items:center;background:#0a2244;border:1px solid #304b70;border-radius:14px;padding:8px 12px;margin-bottom:8px}.lg-player{display:flex;align-items:center;gap:8px;font-weight:900}.lg-dot{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.25)}.lg-blue{background:#0878e8}.lg-red{background:#e62832}.lg-turn{color:#ffd052;font-size:12px;font-weight:900;text-align:center}.lg-board{position:relative;width:min(94vw,570px);aspect-ratio:1;margin:auto;background:radial-gradient(circle,#f6df8e 0 15%,#d9bd6b 15.5% 20%,#0a6a46 20.5% 53%,#063d31 54%);border:8px solid #a66c16;border-radius:28px;box-shadow:0 12px 35px #000;overflow:hidden}.lg-cell{position:absolute;width:5.2%;aspect-ratio:1;border-radius:50%;background:#f7e9bd;border:1px solid #795b24;transform:translate(-50%,-50%);display:grid;place-items:center;font-size:8px;color:#18304d}.lg-cell.safe{background:#ffd052;box-shadow:0 0 0 2px #fff}.lg-home-cell{position:absolute;width:6%;aspect-ratio:1;border-radius:6px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.7)}.lg-yard{position:absolute;width:24%;height:24%;border:3px solid rgba(255,255,255,.8);border-radius:18px;display:grid;grid-template-columns:1fr 1fr;place-items:center;padding:7px}.lg-yard.blue{left:5%;bottom:5%;background:#075ca8}.lg-yard.red{right:5%;top:5%;background:#ad1724}.lg-token{position:absolute;width:7.1%;aspect-ratio:1;border-radius:50% 50% 48% 48%;border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 4px 7px rgba(0,0,0,.65);z-index:8;display:grid;place-items:center;font-size:clamp(11px,3vw,20px);transition:left .12s linear,top .12s linear,transform .16s}.lg-token.blue{background:#0878e8}.lg-token.red{background:#e62832}.lg-token.legal{animation:lgLegal .8s infinite;cursor:pointer;z-index:10}.lg-token.finished{box-shadow:0 0 14px #ffd052}.lg-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:10px}.lg-dice{width:68px;height:68px;border:4px solid #ffd052;border-radius:17px;background:#fff;color:#071936;font-size:48px;line-height:1;box-shadow:0 7px 0 #a56b00}.lg-dice.rolling{animation:lgRoll .48s linear infinite}.lg-roll{min-width:160px;height:58px;border:0;border-radius:16px;background:linear-gradient(135deg,#ffd85d,#e6a316);color:#071936;font-weight:950;font-size:17px}.lg-roll:disabled{opacity:.48}.lg-message{text-align:center;min-height:24px;margin:8px 0 0;color:#dce6f5;font-weight:750}.lg-win{position:fixed;inset:0;z-index:2147483647;background:rgba(1,8,20,.88);display:grid;place-items:center;padding:20px}.lg-win-card{text-align:center;background:#082244;border:2px solid #ffd052;border-radius:25px;padding:30px;width:min(100%,430px)}.lg-win-card .trophy{font-size:76px}.lg-win-card h2{color:#ffd052;font-size:34px}.lg-win-card button{width:100%;padding:15px;border:0;border-radius:14px;background:#ffd052;color:#071936;font-weight:950}@keyframes lgLegal{50%{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 20px #fff}}@keyframes lgRoll{to{transform:rotate(360deg)}}@media(max-height:760px){.lg-board{width:min(78vh,92vw)}.lg-score{padding:5px 9px}.lg-controls{margin-top:6px}.lg-dice{width:56px;height:56px;font-size:39px}.lg-roll{height:50px}}

/* Haitian wooden board and carved dice visual layer */
.lg-board{width:min(94vw,620px);background:#e8d5ad url('/app/ludo-ayisyen/ludo-board-haitian-v1.webp?v=1') center/contain no-repeat;border:5px solid #b77b22;border-radius:18px}.lg-cell{width:4.5%;background:transparent;border:0;pointer-events:none}.lg-cell.safe{background:rgba(255,208,82,.42);box-shadow:0 0 0 2px rgba(255,255,255,.8)}.lg-home-cell{width:4.7%;border-radius:50%;border:0;background:rgba(255,255,255,.08)}.lg-yard{display:none}.lg-token{width:6.8%;border-width:2px;padding:0}.lg-dice{position:relative;width:86px;height:76px;border:0;background:transparent;padding:0;box-shadow:none;overflow:visible}.lg-dice img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.58));pointer-events:none}.lg-dice span{position:absolute;right:-2px;bottom:-2px;min-width:27px;height:27px;padding:0 7px;border-radius:14px;background:#ffd052;color:#071936;border:2px solid #fff;display:grid;place-items:center;font-weight:950;font-size:15px}@media(max-height:760px){.lg-dice{width:72px;height:62px}}

/* Ludo board visual correction v3 */
#hcLudoGame .lg-board{
  width:min(96vw,680px);
  background-image:url('/app/ludo-ayisyen/ludo-board-haitian-v2.webp?v=1');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#d8bb83;
  border:4px solid #b77b22;
  border-radius:15px;
}

/* Coordinates remain functional but are not painted over the artwork. */
#hcLudoGame .lg-cell,
#hcLudoGame .lg-cell.safe,
#hcLudoGame .lg-home-cell{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  opacity:0!important;
}

#hcLudoGame .lg-token{
  width:6.2%;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 4px 9px rgba(0,0,0,.72);
}

@media(max-height:760px){
  #hcLudoGame .lg-board{
    width:min(75vh,95vw);
  }
}

/* Official Ludo Ayisyen board v4 */
#hcLudoGame .lg-board{
  width:min(96vw,680px);
  aspect-ratio:1;
  background-color:transparent;
  background-image:url('/app/ludo-ayisyen/ludo-board-official-v1.png?v=1');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  border:0;
  border-radius:0;
  box-shadow:0 18px 38px rgba(0,0,0,.48);
  overflow:visible;
}

/* Keep the coordinate system interactive but invisible. */
#hcLudoGame .lg-cell,
#hcLudoGame .lg-cell.safe,
#hcLudoGame .lg-home-cell{
  opacity:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Boat positions calibrated for the empty red and blue harbors. */
#hcLudoGame .lg-token{
  width:6.4%;
  min-width:0;
  padding:0;
  border:2px solid rgba(255,255,255,.96);
  box-shadow:0 4px 9px rgba(0,0,0,.72);
}

@media(max-height:760px){
  #hcLudoGame .lg-board{
    width:min(75vh,95vw);
  }
}


/* Harbor boat alignment v5 */
#hcLudoGame .lg-token{
  width:5.5%;
  font-size:clamp(10px,2.6vw,18px);
}


/* Square-by-square movement v6 */
#hcLudoGame .lg-token{
  transition:
    left 145ms linear,
    top 145ms linear,
    transform 145ms ease,
    filter 145ms ease;
  will-change:left,top,transform;
}


/* Precise board-track calibration v7 */
#hcLudoGame .lg-token{
  width:4.6%;
  font-size:clamp(9px,2.2vw,16px);
  border-width:1.5px;
}


/* Ludo Quit Game button v8 */
#hcLudoGame .lg-quit{
  display:block;
  width:min(100%,320px);
  min-height:46px;
  margin:8px auto 0;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:14px;
  background:rgba(8,29,61,.92);
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
  touch-action:manipulation;
}

#hcLudoGame .lg-quit:active{
  transform:scale(.98);
  background:#102d55;
}

@media(max-height:760px){
  #hcLudoGame .lg-quit{
    min-height:40px;
    margin-top:4px;
    padding:7px 15px;
    font-size:11px;
  }
}

/* Drawn grid over wood photo v9 */
#hcLudoGame .lg-face{position:absolute;left:12%;top:12%;width:76%;height:76%;border-radius:12px;background:rgba(150,105,55,.45);pointer-events:none;z-index:1}
#hcLudoGame .lg-cell{opacity:1!important;width:4.2%!important;background:rgba(247,236,200,.94)!important;border:1px solid rgba(90,60,20,.55)!important;border-radius:3px!important;box-shadow:0 1px 2px rgba(0,0,0,.28)!important;color:#8a5a12!important;font-size:8px!important;z-index:3}
#hcLudoGame .lg-cell.safe{background:rgba(255,208,82,.96)!important;box-shadow:0 0 0 2px #fff!important;color:#7a4a00!important}
#hcLudoGame .lg-home-cell{opacity:1!important;width:4.2%!important;border-radius:3px!important;border:1px solid rgba(255,255,255,.55)!important;z-index:3}
#hcLudoGame .lg-home-cell.blue{background:#1e88e5!important}
#hcLudoGame .lg-home-cell.red{background:#e53935!important}
#hcLudoGame .lg-harbor{position:absolute;width:21%;height:21%;transform:translate(-50%,-50%);border-radius:16px;border:3px solid rgba(255,255,255,.85);z-index:2}
#hcLudoGame .lg-harbor.red{background:rgba(200,30,40,.9)}
#hcLudoGame .lg-harbor.blue{background:rgba(20,120,230,.9)}
#hcLudoGame .lg-center{position:absolute;left:50%;top:50%;width:14%;height:14%;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(135deg,#ffd85d,#e6a316);border:2px solid #fff;border-radius:8px;display:grid;place-items:center;z-index:3}
#hcLudoGame .lg-center span{transform:rotate(-45deg);font-size:9px;font-weight:900;color:#5a3a00;letter-spacing:1px}
#hcLudoGame .lg-token{z-index:9}