.play-tools #online-button{background:#3d5148;color:#fff4d8;border-color:#3d5148;min-height:44px;white-space:nowrap}
.play-tools #online-button:hover{background:#4b6658}
.online-status{display:flex;align-items:center;gap:0;border:1px solid #60765b;border-radius:8px;background:#dce7cf;overflow:hidden;flex-shrink:0}
.play-tools .online-status button{border:0;border-radius:0;min-height:44px;background:transparent;color:#314b36;padding:8px 10px;font-size:11px;white-space:nowrap}
.play-tools .online-status .online-badge-leave{border-left:1px solid #a9b89b;min-width:44px;font-size:19px;padding:5px 10px}
.online-status button:hover{background:#cbdcb9}
.online-panel{box-sizing:border-box;width:min(510px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid #626557;border-radius:18px;background:#202821;color:#f1f0df;box-shadow:0 28px 110px #0008;overflow:auto;overscroll-behavior:contain;font-family:Arial,Helvetica,sans-serif;color-scheme:dark}
.online-panel::backdrop{background:#101910bd;backdrop-filter:blur(5px)}
.online-panel [hidden],.online-status[hidden]{display:none!important}
.online-panel *{box-sizing:border-box}
.online-head{display:flex;align-items:center;gap:12px;padding:25px 25px 16px}
.online-heading{flex:1;min-width:0}
.online-kicker{margin:0 0 7px;color:#bbc5aa;font:10px var(--mono,monospace);letter-spacing:1.3px}
.online-panel h2{margin:0;font-size:27px;line-height:1.12;letter-spacing:-.7px}
.online-panel h3{margin:0;font-size:14px}
.online-content{padding:0 25px 22px}
.online-intro{margin:0 0 14px;color:#bec8b3;font-size:13px;line-height:1.5}
.online-connection{margin:0 0 18px;display:flex;align-items:center;gap:8px;color:#d8e8b6;font-size:12px;line-height:1.4}
.online-connection::before{content:'';width:7px;height:7px;border-radius:50%;background:#b9d38d;flex-shrink:0}
.online-panel[data-status="connecting"] .online-connection::before{background:#eec46d}
.online-panel[data-status="error"] .online-connection::before{background:#ed9d88}
.online-error{margin:0 0 16px;padding:12px 14px;background:#543d31;border:1px solid #a96f51;border-radius:8px;color:#ffe0c5;font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.online-label{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#e6eadb}
.online-input{display:block;width:100%;min-width:0;min-height:46px;border:1px solid #718064;border-radius:8px;background:#141e17;color:#f5f6e8;padding:11px 12px;font:16px Arial,Helvetica,sans-serif}
.online-input::placeholder{color:#8f9c84;opacity:1}
.online-input[aria-invalid="true"]{border-color:#edaa84}
.online-input:disabled{opacity:.6}
.online-hint{margin:8px 0 18px;color:#b1bea4;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.online-panel .online-action{min-height:44px;padding:11px 15px;border:1px solid #69785c;border-radius:8px;background:#334131;color:#f1f0df;font-size:13px;font-weight:700;line-height:1.3;touch-action:manipulation}
.online-panel .online-action:hover:not(:disabled){background:#45513d}
.online-panel .online-primary{background:#efc46c;border-color:#efc46c;color:#263023}
.online-panel .online-primary:hover:not(:disabled){background:#ffda8f}
.online-panel .online-quiet{background:transparent}
.online-panel .online-action:disabled{opacity:.45;cursor:default}
.online-panel button:focus-visible,.online-panel input:focus-visible,.online-status button:focus-visible{outline:3px solid #f0c56b;outline-offset:3px}
.online-status button:focus-visible{outline-offset:-4px}
#online-close{min-width:44px;font-size:22px;padding:6px;align-self:flex-start}
#online-create,#online-start{width:100%}
.online-separator{display:flex;align-items:center;gap:13px;margin:22px 0;color:#a6b29c;font-size:11px}
.online-separator::before,.online-separator::after{content:'';height:1px;flex:1;background:#4c5943}
.online-join-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
#online-join-code{font-family:var(--mono,monospace);font-weight:700;letter-spacing:.28em;text-transform:uppercase}
.online-share{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #627253;border-radius:12px;padding:17px;background:repeating-linear-gradient(0deg,transparent,transparent 17px,#b5cca607 17px,#b5cca607 18px),#18251b}
.online-share .online-label{color:#b6c99b;font:10px var(--mono,monospace);letter-spacing:1.5px}
.online-room-code{display:block;font:700 clamp(26px,7vw,35px) var(--mono,monospace);letter-spacing:.15em;color:#f8dc96;line-height:1.1}
.online-share .online-action{font-size:12px;flex-shrink:0}
.online-manual{margin:12px 0 0}
.online-roster-head{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}
.online-count{font:12px var(--mono,monospace);color:#b6c5a1}
.online-roster{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0;padding:0}
.online-player{display:flex;align-items:center;gap:8px;min-width:0;min-height:43px;border:1px solid #46543f;border-radius:7px;padding:9px;background:#283327}
.online-player-number{flex-shrink:0;font:11px var(--mono,monospace);color:#a9bf92}
.online-player-name{min-width:0;font-size:12px;overflow-wrap:anywhere;line-height:1.4}
.online-player-role{margin-left:auto;flex-shrink:0;color:#c5d1b5;font:8px var(--mono,monospace);letter-spacing:.3px}
.online-map{margin:18px 0 0;color:#e3e9d5;font-size:12px;overflow-wrap:anywhere}
.online-host-note{margin-bottom:18px}
.online-waiting{margin:10px 0 0;color:#c3d0b1;font-size:12px;line-height:1.5}
.online-footer{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;padding:15px 25px;border-top:1px solid #46513e;background:#1b241c;border-radius:0 0 18px 18px}
.online-footer .online-hint{width:100%;margin:0 0 3px;font-size:11px}
.online-footer .online-action{font-size:12px}
.online-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:520px){
  .online-panel{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:13px}
  .online-head{padding:19px 17px 14px}.online-content{padding:0 17px 18px}.online-footer{padding:12px 17px;border-radius:0 0 13px 13px}
  .online-panel h2{font-size:24px}.online-kicker{font-size:9px;letter-spacing:.8px}
  .online-share{padding:14px;gap:10px}.online-share .online-action{padding:10px;font-size:11px}
  .online-roster{grid-template-columns:1fr}.online-player-role{font-size:9px}
}
@media(max-width:980px) and (pointer:coarse){
  body.mobile-round .play-tools{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:2px}
  body.mobile-round .play-tools::-webkit-scrollbar{display:none}
  body.mobile-round .play-tools>#online-button{flex-shrink:0;background:#dbbd72;color:#1c3428;border-color:#edcf83;min-height:44px}
  body.mobile-round .online-status{background:#18302ae6;border-color:#aec58b70}
  body.mobile-round .play-tools .online-status button{background:transparent;color:#eef4df;min-height:44px;backdrop-filter:none}
  body.mobile-round .play-tools .online-status .online-badge-leave{border-left-color:#8b9f7466;min-width:44px}
}
@media(max-height:520px){.online-panel{max-height:calc(100dvh - 12px)}.online-head{padding-top:15px}.online-content{padding-bottom:15px}.online-separator{margin:16px 0}}