.ghl{font-family:inherit;color:#30285a;background:linear-gradient(135deg,#f8f3ff,#fef7fc);border:1px solid #e9ddff;border-radius:26px;padding:clamp(14px,3vw,28px);max-width:1050px;margin:20px auto;box-shadow:0 16px 40px #5330a51c}
.ghl *{box-sizing:border-box}.ghl button,.ghl select{font:inherit}.ghl button{cursor:pointer;border:0;border-radius:14px;padding:12px 17px;font-weight:800}.ghl button:focus-visible,.ghl select:focus-visible{outline:3px solid #6145ea;outline-offset:2px}.ghl button:disabled{opacity:.48;cursor:default}
.ghl-top{display:flex;align-items:start;justify-content:space-between;gap:12px}.ghl-top h2{font-size:clamp(25px,4vw,38px);margin:4px 0}.ghl-top p{margin:0 0 20px;color:#6e658a}.ghl-eyebrow{font-size:11px;letter-spacing:.18em;font-weight:900;color:#7e52ee}.ghl-quiet{background:#ede5ff;color:#6241a6}.ghl-primary{background:linear-gradient(110deg,#784df6,#ef4f9d);color:white;box-shadow:0 8px 18px #9654d44d}
.ghl-setup{background:white;border-radius:22px;padding:24px;box-shadow:0 8px 25px #6b3dd010}.ghl-setup h3{margin-top:0}.ghl-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ghl-options label{display:grid;gap:8px;font-size:13px;font-weight:800}.ghl select{width:100%;border:1px solid #d9c9f6;background:#f9f6ff;border-radius:12px;padding:12px;color:#30285a}.ghl-setup-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}.ghl-note{font-size:13px;color:#7b7197}
.ghl-status{padding:10px 14px;margin-bottom:14px;border-radius:12px;background:white;font-weight:900}.ghl-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(175px,235px);gap:16px;align-items:start}
.ghl-board{position:relative;width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);background:white;border:5px solid #433a76;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px #40318030}
.ghl-cell{border:1px solid #d9d4e7;min-width:0;min-height:0}.ghl-cell.path{background:#fff}.ghl-cell.safe{background:#fdf1c5}.ghl-cell.red{background:#ffb9c4}.ghl-cell.green{background:#b5f1d5}.ghl-cell.yellow{background:#ffe69b}.ghl-cell.blue{background:#b9d7ff}.ghl-cell.center{background:#7250e9}.ghl-cell.base{border-color:#ffffff70}
.ghl-token{position:absolute;transform:translate(-50%,-50%);width:4.6%;height:4.6%;min-width:13px;min-height:13px;border-radius:50%;border:2px solid white;box-shadow:0 2px 6px #21194b88;z-index:2;padding:0!important;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.ghl-token.red{background:#ed425e}.ghl-token.green{background:#14b97a}.ghl-token.yellow{background:#f7b900}.ghl-token.blue{background:#3889ed}.ghl-token.legal{outline:3px solid #7b4ef9;outline-offset:2px;animation:ghl-pulse 1s infinite alternate}.ghl-token:disabled{opacity:1;cursor:default}
@keyframes ghl-pulse{to{filter:brightness(1.2);transform:translate(-50%,-50%) scale(1.13)}}.ghl-panel{background:white;border-radius:18px;padding:16px;display:grid;gap:14px}.ghl-player{display:flex;align-items:center;gap:8px;padding:9px;border-radius:10px;font-weight:750}.ghl-player.active{background:#f1e9ff}.ghl-dot{width:14px;height:14px;border-radius:50%;display:inline-block}.ghl-dot.red{background:#ed425e}.ghl-dot.green{background:#14b97a}.ghl-dot.yellow{background:#f7b900}.ghl-dot.blue{background:#3889ed}.ghl-dice-wrap{text-align:center;display:grid;gap:12px}.ghl-die{font-size:65px;line-height:1.1;color:#6e4deb}.ghl-message{font-size:13px;min-height:36px;color:#675b89}
@media(max-width:700px){.ghl-layout{grid-template-columns:1fr}.ghl-panel{grid-template-columns:1fr 1fr;align-items:center}.ghl-panel [data-players-list]{grid-row:span 2}.ghl-options{grid-template-columns:1fr}.ghl-top{flex-wrap:wrap}.ghl-board{border-width:3px}.ghl-token{border-width:1px}}@media(max-width:400px){.ghl-panel{grid-template-columns:1fr}.ghl-panel [data-players-list]{grid-row:auto}}@media(prefers-reduced-motion:reduce){.ghl-token{animation:none;transition:none}}

.ghl-token.grouped{border-width:1px;box-shadow:0 1px 3px #21194b99}.ghl-token.grouped.legal{outline-width:2px;outline-offset:1px}

/* Unified CSS die: identical design for every face, tinted for the active player. */
.ghl-die{--die-color:#ed425e;width:82px;height:82px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;padding:13px;border:3px solid color-mix(in srgb,var(--die-color),black 20%);border-radius:17px;background:linear-gradient(145deg,#fff 15%,color-mix(in srgb,var(--die-color),white 80%) 100%);box-shadow:0 7px 0 color-mix(in srgb,var(--die-color),black 35%),0 12px 18px #25134a44;transform-style:preserve-3d;transition:background .2s,border-color .2s;flex-shrink:0}
.ghl-die[data-color="red"]{--die-color:#ed425e}.ghl-die[data-color="green"]{--die-color:#14b97a}.ghl-die[data-color="yellow"]{--die-color:#e7ad00}.ghl-die[data-color="blue"]{--die-color:#3889ed}
.ghl-pip{width:100%;height:100%;border-radius:50%;background:var(--die-color);box-shadow:inset 0 2px 2px #0003;visibility:hidden}.ghl-pip.visible{visibility:visible}
.ghl-die.rolling{animation:ghl-dice-roll .85s cubic-bezier(.18,.62,.31,1) both}
@keyframes ghl-dice-roll{0%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-23px) rotate(-17deg) scale(1.08)}55%{transform:translateY(-9px) rotate(23deg) scale(1.04)}80%{transform:translateY(0) rotate(-8deg) scale(.96)}100%{transform:translateY(0) rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.ghl-die.rolling{animation:none}}

/* v0.2: original premium arcade treatment inspired by classic Ludo geometry */
.ghl{background:radial-gradient(circle at 12% 8%,#284f9b 0,transparent 38%),radial-gradient(circle at 95% 90%,#263d88 0,transparent 35%),repeating-linear-gradient(45deg,#10285e 0,#10285e 23px,#132e68 24px,#132e68 47px);border:2px solid #4678d4;color:#fff;box-shadow:0 22px 60px #07153888;max-width:920px}
.ghl-top h2,.ghl-setup h3{color:#fff;text-shadow:0 3px 10px #040c2e}.ghl-top p,.ghl-note{color:#bcd4ff}.ghl-eyebrow{color:#ffd766}
.ghl-setup{background:linear-gradient(135deg,#193d7e,#0e255a);border:1px solid #5176bf;box-shadow:inset 0 1px #ffffff2c,0 12px 35px #030e2e77;color:#fff}
.ghl select{background:#edf5ff;color:#182a55;border:2px solid #85aff2}
.ghl-quiet{background:#254c94;color:#fff;border:1px solid #7198e5!important}
.ghl-primary{background:linear-gradient(135deg,#ffca41,#f07822);color:#37200b;box-shadow:0 5px 0 #a64d1a,0 9px 18px #07163e70}
.ghl-primary:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #a64d1a}
.ghl-status{background:#153e84;border:1px solid #6289d7;color:#fff;text-align:center;box-shadow:inset 0 1px #ffffff25}
.ghl-layout{grid-template-columns:minmax(0,1fr) 215px;gap:18px}
.ghl-board{border:7px solid #f8f9ff;border-radius:10px;box-shadow:0 0 0 3px #182957,0 15px 30px #0008;background:#fff;isolation:isolate}
.ghl-cell{border:1px solid #c9ced9}
.ghl-cell.path{background:#fff}
.ghl-cell.safe{background:#fff8e3;position:relative}
.ghl-cell.safe::after{content:"☆";font-size:clamp(10px,2.2vw,24px);font-weight:900;color:#b1a9ad;display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1}
.ghl-cell.red.base{background:#e92c45}.ghl-cell.green.base{background:#0ca66b}.ghl-cell.yellow.base{background:#efbd1e}.ghl-cell.blue.base{background:#1c7ad2}
.ghl-cell.red:not(.base){background:#ed425e}.ghl-cell.green:not(.base){background:#17b779}.ghl-cell.yellow:not(.base){background:#f3c42b}.ghl-cell.blue:not(.base){background:#2a91e9}
.ghl-cell.center{background:#fff;border-color:#fff}
.ghl-center-art{position:absolute;left:40%;top:40%;width:20%;height:20%;z-index:1;pointer-events:none}
.ghl-center-art svg{width:100%;height:100%;display:block}
.ghl-board::before{content:"";position:absolute;z-index:1;pointer-events:none;inset:0;background:linear-gradient(145deg,#ffffff11,transparent 40%);}
.ghl-token{background-image:radial-gradient(ellipse at 35% 20%,#ffffffb5,transparent 34%),linear-gradient(135deg,#ffffff25,#00000025)!important;border:2px solid #fff!important;box-shadow:0 2px 0 #152b48,0 4px 6px #0007,inset 0 0 0 2px #ffffff66!important;transition:left .17s ease-out,top .17s ease-out,width .17s,height .17s;z-index:3!important}
.ghl-token.red{background-color:#f03650}.ghl-token.green{background-color:#00ae72}.ghl-token.yellow{background-color:#ffc400}.ghl-token.blue{background-color:#2585ef}
.ghl-token.legal{outline:3px solid #ffe85a;outline-offset:2px;animation:ghl-token-ready .75s ease-in-out infinite alternate}
@keyframes ghl-token-ready{to{filter:brightness(1.25);box-shadow:0 0 15px #fff8!important}}
.ghl-panel{background:linear-gradient(160deg,#183d80,#0b2354);border:1px solid #5986d1;box-shadow:inset 0 1px #ffffff22,0 10px 20px #0005;color:#fff}
.ghl-player{background:#092453;border:1px solid #385d9e;color:#dceaff}
.ghl-player.active{background:#ffe59b;color:#192a55;border:2px solid #ffb800;box-shadow:0 0 15px #ffcf5e55}
.ghl-message{color:#e0edff}
.ghl-die{width:86px;height:86px;border-radius:19px;background:linear-gradient(145deg,#fff,#dceaff);border:4px solid var(--die-color);box-shadow:0 7px 0 color-mix(in srgb,var(--die-color),black 40%),0 12px 18px #0006}
.ghl-pip{box-shadow:inset 0 2px 2px #0003,0 1px #fff6}
.ghl [hidden]{display:none!important}
.ghl-options label[hidden]{display:none!important}
.ghl-token.grouped{border-width:1px!important}
@media(max-width:700px){.ghl{padding:12px;border-radius:18px}.ghl-layout{grid-template-columns:1fr}.ghl-board{border-width:4px}.ghl-panel{grid-template-columns:1fr 1fr}.ghl-panel [data-players-list]{grid-row:span 2}.ghl-die{width:70px;height:70px;padding:10px}.ghl-top h2{font-size:26px}}
@media(max-width:390px){.ghl-panel{grid-template-columns:1fr}.ghl-panel [data-players-list]{grid-row:auto}}

.ghl-cell.base-inner{background:#fff!important;border-color:#fff}
.ghl-cell.base-inner:nth-child(odd){background:#fdfdfd!important}
.ghl-cell.start{border:1px solid #ffffff99}
.ghl-cell.start.red{background:#ed425e}.ghl-cell.start.green{background:#17b779}.ghl-cell.start.yellow{background:#f3c42b}.ghl-cell.start.blue{background:#2a91e9}