:root{color-scheme:dark;--gold:#ffd54f;--sky:#78dfff;--ink:#f7fbff;--muted:#b4ceef;--panel:#0b2154;--red:#ed3735;--green:#149c42;--blue:#0a89df;--yellow:#f2c200}
  *{box-sizing:border-box}
  html{background:#071431}
  body{margin:0;min-height:100vh;color:var(--ink);font-family:ui-rounded,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse at 48% 0%,#214f91,#0d2b65 45%,#07162f 100%);padding:14px 12px 32px;overflow-x:hidden}
  button,select{font:inherit}
  button{cursor:pointer;-webkit-tap-highlight-color:transparent}
  button:focus-visible,select:focus-visible{outline:3px solid #ffe474;outline-offset:3px}
  .page{width:min(100%,690px);margin:0 auto}
  .titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px auto 13px;padding:0 4px}
  .brand{display:flex;align-items:center;gap:10px;min-width:0}
  .brandicon{width:44px;height:44px;display:grid;place-items:center;font-size:28px;border-radius:13px;background:linear-gradient(145deg,#ffe892,#f6ad17);border:2px solid #fff19a;box-shadow:inset 0 -4px #b47716,0 5px 13px #0006;flex:none}
  .brand h1{margin:0;font-size:clamp(18px,4.3vw,27px);letter-spacing:-.8px;line-height:1.05;text-shadow:0 3px #041944}
  .brand small{display:block;margin-top:5px;color:#b9dbff;letter-spacing:.5px;font-weight:700;font-size:10px}
  .header-actions{display:flex;gap:7px}
  .iconbtn{width:39px;height:39px;display:grid;place-items:center;border:1px solid #6799d6;background:linear-gradient(145deg,#234e90,#0c2c63);border-radius:12px;color:#f6fbff;font-size:20px;box-shadow:0 5px 0 #061738,0 6px 12px #0004;transition:transform .12s}
  .iconbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #061738}
  .stage{position:relative;overflow:hidden;border:3px solid #77c7f6;border-radius:22px;background:linear-gradient(145deg,#082f69,#0d2763 50%,#114380);box-shadow:inset 0 0 0 3px #09204a,0 18px 40px #0009;padding:13px 13px 16px;isolation:isolate}
  .stage:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background:repeating-linear-gradient(45deg,transparent 0 26px,#62b6f0 27px 29px,transparent 30px 54px),radial-gradient(ellipse at 30% 30%,#3480c6,transparent 55%)}
  .hud{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-height:91px;align-items:center;position:relative;z-index:2}
  .hud.top{margin:2px 1px 10px}
  .hud.bottom{margin:10px 1px 1px}
  .player{display:flex;align-items:center;gap:8px;min-width:0;min-height:74px;padding:8px 9px;background:linear-gradient(125deg,#143975,#092354);border:2px solid #507fc0;border-radius:13px;box-shadow:inset 0 1px #ffffff19,0 5px 0 #051a40,0 8px 12px #0004;transition:border-color .22s,box-shadow .22s,transform .22s}
  .player.active{border-color:var(--gold);box-shadow:0 0 0 2px #f9d4457d,0 0 27px #ffe15e6b,inset 0 1px #ffffff56,0 5px 0 #6b4a09;transform:translateY(-1px)}
  .player:not(.active){filter:saturate(.82)}
  .player[data-where="top-right"]{flex-direction:row-reverse}
  .player[data-where="bottom-left"]{flex-direction:row}
  .player-avatar{display:grid;place-items:center;width:43px;height:43px;flex:none;border-radius:50%;font-size:23px;background:radial-gradient(circle at 30% 20%,#fff,#c7e0fb);border:3px solid var(--team);box-shadow:0 2px 0 #041b3f}
  .player-info{flex:1;min-width:0}.player-name{font-size:14px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-role{color:#d3def2;font-size:9px;font-weight:800;letter-spacing:1.1px;margin-top:2px}
  .player-score{color:#ffec91;font-size:10px;margin-top:4px;font-weight:700}
  .player-name:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--team);margin-right:5px;box-shadow:0 0 6px var(--team)}
  .player-die{width:59px;height:59px;display:grid;place-items:center;flex:none;padding:7px;border:2px solid #eff9ff;border-radius:14px;background:linear-gradient(137deg,#fff 0%,#f8fbff 35%,#c6d4e4 100%);box-shadow:inset -4px -5px #9eaec2,0 6px 0 #5c7298,0 10px 11px #0007;transform-style:preserve-3d;position:relative;transition:filter .18s}
  .player-die:disabled{cursor:default;opacity:.8}
  .player-die.ready{border-color:#ffe878;box-shadow:inset -4px -5px #abb5c8,0 6px 0 #6e6199,0 0 18px 5px #ffe684a8;animation:readyPulse 1s infinite alternate}
  .player-die.rolling{animation:shake 90ms infinite alternate cubic-bezier(.3,.1,.8,1.6);z-index:3;filter:brightness(1.16)}
  .player-die.landed{animation:land .45s cubic-bezier(.2,1.2,.3,1)}
  @keyframes readyPulse{to{filter:brightness(1.22);transform:scale(1.045)}}
  @keyframes shake{0%{transform:perspective(150px) rotateX(27deg) rotateZ(-32deg) translate(-5px,-7px) scale(.92)}100%{transform:perspective(150px) rotateY(-31deg) rotateZ(30deg) translate(5px,3px) scale(1.13)}}
  @keyframes land{0%{transform:translateY(-32px) rotate(-50deg) scale(1.27)}60%{transform:translateY(5px) rotate(9deg) scale(.88)}100%{transform:translateY(0) rotate(0) scale(1)}}
  .pips{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px}
  .pip{border-radius:50%}.pip.on{background:radial-gradient(circle at 35% 25%,#354c67,#091426 72%);box-shadow:inset 1px 2px 1px #0007,0 1px 1px #fff7}
  .board-frame{border:4px solid #071938;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 0 0 2px #4c96cc,0 8px 18px #0009;position:relative}
  canvas{width:100%;height:auto;aspect-ratio:1;display:block;cursor:pointer;touch-action:manipulation}
  .board-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,#ffffff10,transparent 30% 70%,#ffffff0a);mix-blend-mode:screen}
  .message{display:flex;align-items:center;gap:9px;min-height:54px;margin:12px 2px 10px;padding:10px 12px;border-radius:13px;background:linear-gradient(105deg,#102f68,#071b46);border:1px solid #5387c5;box-shadow:inset 0 1px #ffffff17}
  .message-icon{font-size:23px;flex:none}.message strong{font-size:13px;line-height:1.45;display:block}.message small{font-size:11px;color:#adccef;display:block;margin-top:3px}
  .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 2px}
  .toolbar label{font-size:11px;font-weight:800;color:#bbd6fa}
  .toolbar select{flex:1;min-width:165px;max-width:280px;color:#f5f9ff;border:1px solid #6d95cf;border-radius:9px;background:#123d7c;padding:9px 10px;font-weight:800;font-size:12px}
  .toolbtn{padding:10px 11px;border:1px solid #79a0d7;border-radius:9px;background:#204c87;font-size:12px;font-weight:900;color:#f2f9ff;box-shadow:0 3px #061937}
  .toolbtn:active{transform:translateY(2px);box-shadow:0 1px #061937}
  .footnote{text-align:center;font-size:11px;color:#b7d1f2;line-height:1.55;margin:13px auto 0;max-width:590px}
  .overlay{position:fixed;inset:0;z-index:10;background:#06132cc9;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
  .overlay.show{display:flex}.modal{width:min(96vw,420px);padding:25px 23px 22px;border:3px solid #ffd55b;border-radius:21px;background:linear-gradient(145deg,#204d8f,#102858);box-shadow:0 20px 65px #000b;text-align:center}
  .modal h2{margin:0 0 11px;font-size:26px}.modal p{text-align:left;font-size:13px;line-height:1.7;color:#dceeff}.modal button{margin-top:12px;width:100%;padding:12px;background:linear-gradient(#ffec92,#efaa28);border:2px solid #ffe9b4;border-radius:12px;color:#28305b;font-weight:900;font-size:14px}
  .winner-emoji{font-size:50px;line-height:1.5;animation:winnerBounce .8s infinite alternate}@keyframes winnerBounce{to{transform:translateY(-11px) rotate(9deg)}}
  @media(max-width:550px){body{padding:7px 5px 18px}.titlebar{padding:5px 7px 1px;margin-bottom:9px}.brandicon{height:39px;width:39px;font-size:24px}.iconbtn{width:35px;height:35px;font-size:18px}.stage{padding:8px 6px 11px;border-radius:14px;border-width:2px}.hud{gap:5px;min-height:66px}.hud.top{margin-bottom:7px}.hud.bottom{margin-top:8px}.player{padding:5px 5px;gap:5px;min-height:59px;border-radius:10px}.player-avatar{width:31px;height:31px;font-size:18px;border-width:2px}.player-name{font-size:11px}.player-role{font-size:8px;letter-spacing:.1px}.player-score{font-size:9px}.player-die{width:44px;height:44px;padding:5px;border-radius:10px}.pips{gap:2px}.board-frame{border-width:2px}.message{margin:9px 0 8px}.toolbar{margin:0}.toolbar select{min-width:145px;max-width:none}.toolbtn{padding:9px;font-size:11px}}
  @media(max-width:370px){.player-avatar{display:none}.player-name{font-size:10px}.player-die{width:40px;height:40px}.player{padding:4px}.hud{gap:4px}.toolbar label{display:none}}
  @media(prefers-reduced-motion:reduce){.player-die,.winner-emoji{animation:none!important}}

  /* Fullscreen native dan fallback mobile (iPhone Safari yang tidak mendukung API fullscreen). */
  html:fullscreen,html.is-pseudo-fullscreen{background:#071431}
  html:fullscreen body,html.is-pseudo-fullscreen body{
    height:100vh;height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  html.is-pseudo-fullscreen body{position:fixed;inset:0;width:100%;z-index:50}
  html:fullscreen .page,html.is-pseudo-fullscreen .page{
    width:min(100%, max(280px, calc(100dvh - 240px)), 930px);
    margin:0 auto;
  }
  html:fullscreen .titlebar,html.is-pseudo-fullscreen .titlebar{margin-bottom:8px}
  html:fullscreen .stage,html.is-pseudo-fullscreen .stage{padding:9px 10px 11px}
  html:fullscreen .hud.top,html.is-pseudo-fullscreen .hud.top{margin-bottom:6px}
  html:fullscreen .hud.bottom,html.is-pseudo-fullscreen .hud.bottom{margin-top:6px}
  html:fullscreen .message,html.is-pseudo-fullscreen .message{margin:8px 2px;min-height:44px}
  html:fullscreen .footnote,html.is-pseudo-fullscreen .footnote{margin-top:9px}
  html:fullscreen .iconbtn#fullscreenBtn,html.is-pseudo-fullscreen .iconbtn#fullscreenBtn{
    border-color:#ffda5f;box-shadow:0 0 14px #ffdf5970,0 4px 0 #061738;
  }
  @media(max-height:680px){
    html:fullscreen .brand small,html.is-pseudo-fullscreen .brand small{display:none}
    html:fullscreen .titlebar,html.is-pseudo-fullscreen .titlebar{margin-bottom:4px}
    html:fullscreen .footnote,html.is-pseudo-fullscreen .footnote{display:none}
  }

/* Minimal play screen: board and four player cards only; all controls in Settings. */
[hidden]{display:none!important}
body{padding:9px 9px 16px;background:radial-gradient(ellipse at 50% 0,#22559c,#0b2556 62%,#071634)}
.page{width:min(100%,640px)}
.titlebar{margin:0 0 9px;padding:0 2px}
.brandicon{width:36px;height:36px;font-size:22px;border-radius:11px}
.brand h1{font-size:clamp(18px,4vw,22px)}
.brand small{font-size:8px;letter-spacing:.7px;margin-top:3px}
.iconbtn{width:36px;height:36px;font-size:19px;border-radius:11px;box-shadow:0 3px 0 #071735}
.header-actions{gap:5px}
.room-badge{background:#0d3870;border:1px solid #579ddd;color:#ddf5ff;border-radius:10px;padding:7px 9px;font-size:11px;font-weight:900;white-space:nowrap}
.stage{padding:8px 9px 10px;border:2px solid #559bd3;border-radius:17px;box-shadow:0 9px 28px #0006,inset 0 0 0 2px #082656}
.hud{min-height:auto;gap:7px}.hud.top{margin:1px 0 9px}.hud.bottom{margin:9px 0 0}
.player{min-height:66px;padding:6px 7px;border-radius:11px;border-width:1.5px;box-shadow:0 3px 0 #061a3b,0 5px 8px #0003}
.player.active{box-shadow:0 0 0 1px #ffe16ca8,0 0 13px #ffe36d7a,0 3px 0 #78602d;transform:none}
.player-avatar{height:32px;width:32px;font-size:18px;border-width:2px}
.player-name{font-size:12px}.player-role{font-size:9px;letter-spacing:0}.player-score{font-size:9px;margin-top:3px}
.player-die{height:49px;width:49px;border-radius:11px;padding:5px;border-width:1px;box-shadow:inset -3px -4px #9cacc1,0 4px 0 #7187a9,0 7px 9px #0008}
.board-frame{border-width:3px;border-radius:4px;box-shadow:0 0 0 1px #4c99cf,0 4px 12px #0007}
.overlay{z-index:50}.modal{max-height:min(91dvh,720px);overflow-y:auto;width:min(94vw,420px);padding:18px;border:2px solid #74b8ee;text-align:left;background:linear-gradient(150deg,#184b86,#0c2551)}
.modal h2{font-size:21px;margin:0}.modal p{font-size:12px;line-height:1.6}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.close-x{width:32px;height:32px;border:1px solid #7599ce;border-radius:9px;background:#173e7a;color:#fff;font-size:18px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:4px;border-radius:12px;background:#081d40;margin-bottom:15px}
.tab{border:0;background:transparent;color:#bbd5f6;padding:10px 8px;font-size:12px;font-weight:900;border-radius:9px}
.tab.active{background:#2974c0;color:#fff;box-shadow:0 2px 7px #071733a8}
.tab-panel{display:block}.setting-desc{margin:0 0 13px!important;color:#bfdbff!important}
.form-label{font-size:11px;color:#cfe8ff;font-weight:900;display:block;margin:12px 0 5px}
.form-control{width:100%;padding:11px 12px;border-radius:10px;border:1px solid #729bc9;background:#08224b;color:#fff;outline:0;font-size:13px;min-width:0}
.form-control:focus{border-color:#ffdb64;box-shadow:0 0 0 2px #ffdb6444}
.primary-btn,.secondary-btn,.muted-btn{display:block;width:100%;border-radius:10px;padding:11px 10px;font-weight:900;font-size:12px;line-height:1.3;margin-top:11px;box-shadow:none}
.primary-btn{background:linear-gradient(160deg,#ffec8d,#eeb63d);color:#192e55;border:1px solid #ffe5a2}
.primary-btn:disabled{opacity:.44;cursor:not-allowed}
.secondary-btn{background:#25609e;color:white;border:1px solid #78b5eb}.muted-btn{background:#11315d;color:#cbdcfa;border:1px solid #496fa5}
.inline-fields{display:grid;grid-template-columns:1fr auto;gap:8px}.inline-fields .secondary-btn{margin:0;width:auto}
.or-divider{text-align:center;color:#a6c5ec;font-size:10px;font-weight:900;margin:17px 0 7px}.or-divider:before,.or-divider:after{content:' — '}
.help-link{display:block;border:0;background:none;color:#c5dfff;padding:10px 0 0;margin:13px auto 0;font-weight:700;font-size:11px}
.room-code-label{text-align:center;font-size:11px;letter-spacing:2px;color:#b4dcff;font-weight:900}
.room-code-text{text-align:center;font-size:31px;letter-spacing:5px;color:#ffe47b;font-weight:1000;margin:4px 0 6px}
.lobby-status{text-align:center;font-size:12px;color:#cce4ff;margin:12px 0 9px}
.lobby-players{display:grid;gap:6px}.lobby-person{display:flex;align-items:center;gap:9px;border-radius:9px;background:#082451;padding:9px 10px;font-size:12px;font-weight:800}.lobby-person small{margin-left:auto;color:#b2d5f2;font-size:10px}
.color-dot{height:12px;width:12px;border-radius:50%;box-shadow:0 0 7px #ffffff48}
.small-help{font-size:10px!important;color:#adcaec!important;margin-top:12px!important}
.online-error{font-size:12px;color:#ffe0ba;margin:12px 0 0;border:1px solid #f2a45d;background:#542e26;padding:9px 10px;border-radius:9px}
.winner-emoji{text-align:center}.modal #winnerText{text-align:center}
@media(max-width:550px){body{padding:5px 4px 12px}.brandicon{width:34px;height:34px}.titlebar{margin-bottom:8px}.stage{padding:6px 6px 8px;border-radius:12px}.hud{gap:5px}.hud.top{margin:0 0 6px}.hud.bottom{margin:6px 0 0}.player{min-height:52px;padding:4px 5px;gap:4px;border-radius:8px}.player-avatar{height:26px;width:26px;font-size:15px}.player-die{width:40px;height:40px;padding:4px;border-radius:9px}.player-name{font-size:11px}.player-role{font-size:8px}.player-score{font-size:8px}.iconbtn{width:34px;height:34px}.board-frame{border-width:2px}.floating-message{bottom:5px;padding:6px 8px}}
@media(max-width:360px){.player-avatar{display:none}.brand h1{font-size:17px}.room-badge{font-size:9px;padding:6px}}
html:fullscreen .page,html.is-pseudo-fullscreen .page{width:min(100%,max(280px,calc(100dvh - 135px)),940px)}
html:fullscreen .stage,html.is-pseudo-fullscreen .stage{padding:5px 8px 7px}
html:fullscreen .hud.top,html.is-pseudo-fullscreen .hud.top{margin-bottom:4px}
html:fullscreen .hud.bottom,html.is-pseudo-fullscreen .hud.bottom{margin-top:4px}

/* Fixed-fit fullscreen: portrait game centered, no scrolling or page zoom. */
html:fullscreen,html.is-pseudo-fullscreen{overflow:hidden;overscroll-behavior:none}
html:fullscreen body,html.is-pseudo-fullscreen body{height:100dvh;min-height:0;overflow:hidden;padding:0!important;display:flex;align-items:center;justify-content:center;overscroll-behavior:none;touch-action:manipulation}
html:fullscreen .page,html.is-pseudo-fullscreen .page{box-sizing:border-box;width:min(100vw,calc((100dvh - 20px)*0.79),720px)!important;max-height:100dvh;margin:auto;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
html:fullscreen .titlebar,html.is-pseudo-fullscreen .titlebar{flex:0 0 auto;margin:0 0 4px;padding:0 4px}
html:fullscreen .stage,html.is-pseudo-fullscreen .stage{flex:0 1 auto;min-height:0;padding:5px!important;display:flex;flex-direction:column}
html:fullscreen .hud,html.is-pseudo-fullscreen .hud{flex:0 0 auto;min-height:0}
html:fullscreen .hud.top,html.is-pseudo-fullscreen .hud.top{margin:0 0 4px}
html:fullscreen .hud.bottom,html.is-pseudo-fullscreen .hud.bottom{margin:4px 0 0}
html:fullscreen .board-frame,html.is-pseudo-fullscreen .board-frame{width:100%;max-height:calc(100dvh - 166px);aspect-ratio:1/1;flex:0 1 auto;margin:auto}
html:fullscreen #board,html.is-pseudo-fullscreen #board{width:100%;height:100%;object-fit:contain;touch-action:manipulation}
@media(max-height:720px){html:fullscreen .player,html.is-pseudo-fullscreen .player{min-height:42px;padding:3px 5px}html:fullscreen .player-die,html.is-pseudo-fullscreen .player-die{width:36px;height:36px}html:fullscreen .brand small,html.is-pseudo-fullscreen .brand small{display:none}html:fullscreen .board-frame,html.is-pseudo-fullscreen .board-frame{max-height:calc(100dvh - 132px)}}

/* v4: Fit entire live game into viewport even outside fullscreen. */
html,body{width:100%;height:100%;height:100dvh;overflow:hidden!important;overscroll-behavior:none}
body{box-sizing:border-box;min-height:0!important;padding:6px!important;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.page{width:min(100%,var(--fit-width,640px))!important;max-width:100%!important;max-height:100%!important;margin:0 auto!important;display:flex;flex-direction:column;justify-content:center;flex-shrink:0;min-height:0;overflow:hidden}
.titlebar{flex:0 0 auto;margin:0 0 7px!important;padding:0 2px!important}
.stage{flex:0 0 auto;min-height:0;width:100%;padding:6px!important;display:flex;flex-direction:column;overflow:hidden}
.hud{flex:0 0 auto;min-height:0!important}
.hud.top{margin:0 0 5px!important}
.hud.bottom{margin:5px 0 0!important}
.board-frame{flex:0 0 auto;width:100%;height:auto;aspect-ratio:1 / 1;max-height:none!important;min-height:0;margin:0 auto!important}
#board{width:100%;height:100%;aspect-ratio:1/1;object-fit:fill;touch-action:manipulation}
html:fullscreen body,html.is-pseudo-fullscreen body{min-height:0!important;padding:6px!important;overflow:hidden!important;display:flex;align-items:center;justify-content:center}
html:fullscreen .page,html.is-pseudo-fullscreen .page{width:min(100%,var(--fit-width,640px))!important;max-height:100%!important;justify-content:center!important}
html:fullscreen .stage,html.is-pseudo-fullscreen .stage{padding:6px!important}
html:fullscreen .board-frame,html.is-pseudo-fullscreen .board-frame{max-height:none!important;flex:0 0 auto!important}
/* The old .modal button selector applied width:100% to the close icon. Override explicitly. */
.settings-modal .modal-header{display:flex;align-items:center;gap:12px;justify-content:space-between}
.settings-modal .modal-header h2{min-width:0;flex:1;margin:0}
.settings-modal .modal-header button.close-x{display:grid;place-items:center;flex:0 0 30px;width:30px!important;min-width:30px;max-width:30px;height:30px;padding:0!important;margin:0!important;border-radius:9px;background:#102d60;border:1px solid #83b6e6;color:#fff;font-size:16px;box-shadow:none;line-height:1}
.settings-modal .modal-header button.close-x:active{transform:scale(.92)}
html.awaiting-start .page{visibility:hidden;pointer-events:none}
.welcome-overlay{position:fixed;z-index:110;inset:0;display:none;align-items:center;justify-content:center;padding:14px;background:radial-gradient(ellipse at 50% 20%,#235eaa,#0d2a5e 57%,#061530);overflow:hidden}
html.awaiting-start .welcome-overlay{display:flex}
.welcome-card{width:min(100%,440px);max-height:calc(100dvh - 26px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(18px,3vh,27px);border:2px solid #72b5ec;border-radius:24px;background:linear-gradient(150deg,#1b4c8f,#0b2552);box-shadow:0 22px 80px #000b;text-align:center}
.welcome-logo{font-size:40px;margin-bottom:4px;line-height:1.2}
.welcome-kicker{font-size:10px;color:#a7cef5;font-weight:900;letter-spacing:2px}
.welcome-card h2{font-size:clamp(26px,5vw,34px);margin:5px 0 3px;line-height:1.1}
.welcome-caption{font-size:13px;color:#c5dbf3;margin:0 0 17px}
.welcome-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:5px;border-radius:14px;background:#061a3b;margin-bottom:16px}
.welcome-tab{background:#15376d;border:1px solid transparent;color:#c3d9f5;border-radius:11px;padding:12px 8px;font-weight:900;font-size:14px}
.welcome-tab.selected{background:linear-gradient(130deg,#377ec8,#2466b7);border-color:#ffdb72;color:white;box-shadow:0 0 0 1px #ffe18e77}
.welcome-section{text-align:left}.welcome-label{display:block;margin:12px 0 6px;font-size:12px;font-weight:850;color:#d0e6ff}
.welcome-input{display:block;width:100%;min-width:0;background:#071d42;border:1px solid #719dce;border-radius:11px;color:white;padding:12px 13px;font-size:14px;outline:none}
.welcome-input:focus{border-color:#ffe17b;box-shadow:0 0 0 2px #ffe17b40}
.welcome-hint{font-size:11px;line-height:1.5;color:#b7d0ee;margin:10px 0 13px}
.welcome-action{display:block;width:100%;margin-top:14px;padding:13px 9px;border-radius:12px;border:2px solid #ffeca7;background:linear-gradient(#ffe781,#f5b934);color:#15325a;font-size:15px;font-weight:950;box-shadow:0 4px 0 #a86c13}
.welcome-separator{text-align:center;font-size:11px;color:#9dbbdf;margin:15px 0 5px}
.welcome-join{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.welcome-join button{background:#2c72b7;color:white;border:1px solid #85bfed;border-radius:10px;padding:0 15px;font-weight:850}
.welcome-error{margin-top:12px;padding:9px 11px;border-radius:9px;border:1px solid #ffb78b;background:#603627;color:#ffe1c9;font-size:12px;text-align:left}
@media(max-height:640px){.welcome-card{padding:14px 18px}.welcome-logo{font-size:28px}.welcome-caption{margin-bottom:10px}.welcome-tabs{margin-bottom:9px}.welcome-label{margin:7px 0 4px}.welcome-input{padding:9px 11px}.welcome-tab{padding:8px}.welcome-action{margin-top:9px;padding:9px}.welcome-hint{margin:6px 0}}

/* Game status ditampilkan lewat highlight pemain, tanpa pop-up di papan. */
#floatingMessage{display:none!important}

/* AnoPlay integration: small back links without altering the Ludo board layout. */
.anoplay-return{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;text-decoration:none;color:#d9ebff;background:#123769;border:1px solid #6195cb;border-radius:11px;font-size:23px;font-weight:800;transition:background .2s,transform .2s}
.anoplay-return:hover{background:#2055a0;transform:translateX(-2px)}
.welcome-back,.settings-back{display:inline-block;margin-top:19px;color:#b8d5f3;font-weight:750;font-size:12px;text-decoration:none;padding:5px}
.welcome-back:hover,.settings-back:hover{color:#ffe48c}
.settings-back{display:block;text-align:center;margin-top:10px}
@media(max-width:550px){.anoplay-return{width:29px;height:29px;flex-basis:29px;font-size:20px}.brand{gap:6px}.brand small{font-size:8px}}

/* Online identity, scores and menu-only soundtrack */
.welcome-overlay{overflow-y:auto!important;align-items:center}
.welcome-card{max-height:min(94dvh,820px);overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6ba7df transparent}
.auth-heading{text-align:center;font-size:17px;font-weight:900;color:#fff2b2;margin-bottom:5px}
.auth-gate{margin:6px 0 0}.auth-or{text-align:center;color:#a7c7ee;font-size:11px;margin:13px 0}
.google-slot{display:flex;justify-content:center;min-height:0;margin:8px auto}
.auth-provider{display:block;width:100%;font-size:13px;padding:11px;border-radius:11px;background:#f5f6fa;color:#18345c;border:1px solid #cee3f9;font-weight:900}
.auth-provider:disabled{opacity:.72;cursor:not-allowed}.auth-provider small{display:block;font-size:10px;font-weight:500}
.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;background:#051b3e;border-radius:10px}
.auth-switch button{border:0;background:transparent;color:#bcd6f8;padding:9px;border-radius:8px;font-weight:800}
.auth-switch button.selected{background:#347ac1;color:white}
.auth-form{margin:7px 0 0}.auth-form .welcome-action{margin-top:11px}
.guest-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center}
.auth-guest{padding:10px;font-size:12px;min-height:44px;border-radius:10px;border:1px solid #8fc4e9;background:#1d528f;color:white;font-weight:800}
.auth-error{font-size:12px;color:#ffe1c2;background:#702e31;border-radius:9px;padding:10px;line-height:1.5}
.signed-card{display:flex;gap:8px;align-items:center;justify-content:space-between;border:1px solid #6aadd9;background:#09244f;border-radius:12px;padding:9px 10px}
.signed-card span{display:grid;gap:2px;font-size:14px}.signed-card small{color:#acd4fa;font-size:10px}
.signed-card button{background:#254e80;border:1px solid #83b5e0;color:white;border-radius:8px;padding:7px 9px;font-size:11px}
.my-stats,.leaderboard-mine{font-size:12px!important;color:#ffe4a1!important;margin:9px 0!important;text-align:center!important}
.leaderboard-link{margin:13px auto 4px;display:block;background:transparent;border:1px solid #6da2d0;color:#fbd77b;border-radius:10px;padding:10px 12px;font-size:12px;font-weight:900;width:100%}
.music-toggle{display:block;margin:15px auto 0;border:1px solid #5b88c0;background:#12396d;color:#e5f3ff;border-radius:30px;padding:8px 14px;font-size:12px;font-weight:800}
.leaderboard-modal{max-height:85dvh;overflow:auto;padding:20px}.leaderboard-modal .modal-header{display:flex;align-items:center;gap:8px;justify-content:space-between}.leaderboard-modal .modal-header h2{font-size:20px;margin:0;text-align:left;flex:1}
.leaderboard-modal button.close-x{margin:0;width:32px!important;min-width:32px;max-width:32px;height:32px;padding:0;background:#133568;color:#fff;border:1px solid #7cbbeb;box-shadow:none}
.leaderboard-table{display:grid;gap:5px;margin-top:12px;max-height:50dvh;overflow:auto}.leaderboard-row{display:grid;grid-template-columns:30px minmax(0,1fr) 58px 50px;gap:7px;align-items:center;background:#0c2d63;padding:9px 7px;border-radius:9px;border:1px solid #315c9e;font-size:11px}
.leaderboard-row b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-row em{font-size:9px;color:#b5ccef;font-style:normal}.leaderboard-row strong{color:#ffdc74;text-align:right;font-size:12px}
.leaderboard-empty{color:#b0cae5;font-size:12px;padding:30px 6px;text-align:center}
@media(max-height:700px){.welcome-overlay{align-items:flex-start!important}.welcome-card{margin:auto}.welcome-kicker{display:none}}

[hidden]{display:none!important}

/* v2.1: Leaderboard must appear over the Anodo first-open menu (z-index:110).
   It also stays above the Settings modal without changing normal gameplay layers. */
#leaderboardOverlay.show{z-index:210}
#leaderboardOverlay .leaderboard-modal{position:relative;z-index:1}