/* MOBI LUDO ROYALE — real two-device private rooms, mobile gaming UI. */
.online-root[hidden],.online-dialog [hidden]{display:none!important}
.online-root{position:fixed;z-index:1000;inset:0;display:flex;justify-content:center;align-items:center;
 padding:clamp(0px,2vh,24px) 12px;box-sizing:border-box;
 background:#041124f0;backdrop-filter:blur(8px)}
body.online-open{overflow:hidden!important}
.online-dialog{width:min(900px,100%);max-height:98dvh;overflow:auto;overscroll-behavior:contain;
 border-radius:23px;color:#fff3df;border:1.5px solid #e7b66f;
 background:radial-gradient(ellipse at 50% 18%,#2d4d6a8c,transparent 60%),linear-gradient(155deg,#0a1b37,#0c142b);
 box-shadow:0 26px 65px #000d,inset 0 1px 0 #ffe8a55d}
.online-dialog button{cursor:pointer;touch-action:manipulation}
.online-dialog button:focus-visible,.online-dialog input:focus-visible{outline:3px solid #ffce73;outline-offset:3px}
.online-dialog button:disabled{opacity:.48;cursor:not-allowed}
.online-head{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
 gap:14px;padding:17px 20px;background:linear-gradient(140deg,#213e60,#09172f);
 border-bottom:1px solid #e1b56b8a}
.online-head>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.online-head small{font-size:10px;font-weight:900;letter-spacing:.14em;color:#ffd17e}
.online-head strong{font-size:18px;font-weight:950;color:#fff7e7;line-height:1.15}
#online-close{width:43px;height:43px;flex:0 0 43px;border:1px solid #e5be7a;
 border-radius:50%;background:#152947;color:#ffdda3;font-size:28px}
.online-body{padding:24px 22px 28px}
.online-alert{padding:12px 15px;margin:0 0 17px;line-height:1.5;font-size:13px;
 border:1px solid #9ed2ae80;border-radius:12px;background:#193d43;color:#deffe9}
.online-alert.error{color:#ffe6d5;border-color:#f7a66ba8;background:#512d31}
.online-intro{font-size:14px;line-height:1.75;color:#d9e1e9;max-width:590px;margin:0 0 23px}
.online-label{display:block;font-size:12px;font-weight:850;color:#ffde9e;margin:12px 0 8px}
.online-dialog input{min-width:0;width:min(100%,550px);height:51px;
 border:1px solid #d6b275a6;border-radius:12px;box-sizing:border-box;
 background:#152942;color:white;font-size:15px;font-weight:700;letter-spacing:.03em;
 padding:12px 14px;box-shadow:inset 0 2px 3px #0005}
.online-dialog input::placeholder{color:#a1b3c7}
.online-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}
.online-actions button,.online-join-row button,.online-room button{border:1px solid #dfbd7b99;
 border-radius:13px;padding:12px 16px;min-height:47px;background:linear-gradient(145deg,#264460,#142640);
 color:#ffdd94;font-size:13px;font-weight:900;box-shadow:0 4px 0 #040f1e,0 7px 13px #0007}
.online-dialog .online-primary{border-color:#ffedab;background:linear-gradient(#ffeeb5,#ffcb57 40%,#e49121);
 box-shadow:inset 0 2px 0 #fff9d8,0 4px 0 #874e17,0 9px 16px #f5a62e55;
 color:#321b09;font-weight:1000}
.online-dialog button:active:not(:disabled){transform:translateY(2px)}
.online-join{margin-top:28px;padding:20px 0 0;border-top:1px solid #e0bd704e}
.online-join-row{display:flex;gap:10px;align-items:center}
.online-join-row input{max-width:240px;text-transform:uppercase;letter-spacing:.13em;font-weight:900}
.online-fineprint{color:#aabecb;font-size:11px;line-height:1.7;margin:25px 0 0}
.online-room{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;
 border:1px solid #efd08a73;border-radius:15px;background:linear-gradient(135deg,#213d5b,#151f36)}
.online-room>div{display:flex;flex-direction:column;gap:4px}
.online-room small{font-size:10px;color:#ffd995;letter-spacing:.15em;font-weight:900}
.online-room strong{font-size:29px;letter-spacing:.12em;font-weight:1000;color:#fff4d2}
.online-seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.online-seat{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;
 grid-template-rows:auto auto;gap:2px 8px;padding:13px;border:1px solid #ebbc6682;
 border-radius:14px;background:linear-gradient(#223952,#14283e)}
.online-seat.mine{border-color:#ffdb91;box-shadow:inset 0 0 18px #eabb2f22}
.online-avatar{grid-row:1/3;font-size:24px}
.online-seat strong{font-size:13px;line-height:1.3;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.online-seat small{font-size:9px;color:#ffdc8c;letter-spacing:.1em;font-weight:800}
.online-status{color:#ffe3a6;font-size:13px;line-height:1.5;
 text-align:center;margin:18px 0 11px;font-weight:750;min-height:36px}
.online-board-shell{position:relative;width:100%;max-width:610px;margin:0 auto;border-radius:19px;
 border:1.5px solid #ecc274;background:
 radial-gradient(ellipse at 54% 50%,#8f64346b,transparent 70%),
 url("/assets/royale-sunset.svg") center 50%/cover no-repeat,#14223d;
 box-shadow:inset 0 2px 0 #fff8c04d,0 7px 0 #3a2719,0 14px 26px #000c}
.online-board{position:relative;width:100%;height:min(72vw,470px);min-height:290px;overflow:hidden}
.online-board canvas{display:block;width:100%!important;height:100%!important;touch-action:manipulation;border-radius:17px}
.online-board-fallback{font-size:12px;color:#ffdca2;padding:15px;line-height:1.5;text-align:center}
.online-board-fallback[hidden]{display:none}
.online-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:23px auto 8px}
.online-die{display:grid;place-items:center;width:56px;height:56px;flex:0 0 56px;border:2px solid #ffe5aa;
 border-radius:13px;background:linear-gradient(145deg,#ffefdd,#e5cc9b);color:#14203b;font-size:30px;
 font-weight:1000;box-shadow:0 5px 0 #92754e,0 10px 15px #0008}
.online-controls button{min-width:170px;min-height:50px;border-radius:999px}
.online-moves{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:13px}
.online-moves button{background:#29476b;border:1px solid #ffd37c;color:#fff3d4;border-radius:11px;
 min-height:44px;padding:10px 14px;font-weight:850;font-size:12px}
.mobile-online-cta{display:none}
@media(max-width:600px){
 .online-root{padding:0;align-items:stretch}
 .online-dialog{max-height:100dvh;height:100dvh;border-radius:0;border:0}
 .online-head{padding:calc(11px + env(safe-area-inset-top,0px)) 13px 12px}
 .online-head strong{font-size:15px}
 .online-body{padding:15px 12px calc(35px + env(safe-area-inset-bottom,0px))}
 .online-room{padding:11px 12px;flex-wrap:wrap}
 .online-room strong{font-size:23px}
 .online-room button{font-size:11px;padding:10px}
 .online-seat{padding:10px;grid-template-columns:26px minmax(0,1fr);gap:4px}
 .online-avatar{font-size:20px}
 .online-seat strong{font-size:11px}
 .online-status{font-size:12px}
 .online-board{height:min(82vw,390px);min-height:265px}
 .online-join-row{gap:7px}
 .online-join-row button{padding:10px 12px;font-size:12px}
 .mobile-online-cta{display:flex;width:100%;justify-content:space-between;gap:9px;
  align-items:center;margin:17px 0 7px;padding:13px 14px;text-align:left;
  border:1px solid #ebc777b3;border-radius:15px;
  background:linear-gradient(135deg,#345275,#162c4f 73%,#473524);
  color:#ffefca;font-size:12px;font-weight:950;min-height:51px;
  box-shadow:inset 0 1px 0 #fff4be57,0 4px 0 #1c2033,0 8px 14px #0008}
 .mobile-online-cta span{font-size:10px;white-space:nowrap;color:#3b210c;
  background:linear-gradient(#ffe6a1,#f7ab33);border-radius:999px;padding:5px 9px}
}
@media(prefers-reduced-motion:reduce){.online-root *{transition:none!important;animation:none!important}}

/* Never advertise a beta feature before its authoritative server is live. */
.online-root[hidden],.mobile-online-cta[hidden],[data-mobi-online-open][hidden]{display:none!important}