.local-app{height:100dvh;min-height:100svh}
:root{color-scheme:dark}
body{margin:0;-webkit-font-smoothing:antialiased}
.local-lobby{min-height:100svh;box-sizing:border-box;padding:32px max(24px,calc((100vw - 1120px)/2));color:#f6f1e7;background:radial-gradient(ellipse at 5% 45%,#25434b55,transparent 55%),radial-gradient(ellipse at 90% 85%,#543b3338,transparent 50%),#11242d}
.local-brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:2.8px}
.local-brand-mark{font-size:26px;color:#edcd96;line-height:1}
.local-badge{margin-left:auto;letter-spacing:.5px;color:#b9c5c8;border:1px solid #ffffff1a;border-radius:30px;padding:7px 13px;font-weight:400}
.local-entry{display:grid;grid-template-columns:1fr 440px;gap:72px;align-items:center;padding:clamp(42px,9vh,100px) 0 38px}
.local-eyebrow{color:#dec599;font-size:13px;letter-spacing:2px}
.local-intro h1{font-size:clamp(48px,6vw,78px);letter-spacing:8px;font-weight:700;line-height:1.15;margin:20px 0}
.local-lead{font-size:19px;line-height:1.9;color:#c6cfd0;white-space:pre-line}
.local-cards{height:212px;position:relative;width:290px;margin:32px 0 12px 10px}
.local-card{position:absolute;box-sizing:border-box;width:120px;height:170px;border-radius:13px;background:#fffaf1;color:#24373d;padding:15px 16px;border:1px solid #0000001a;box-shadow:0 8px 18px #00000020,0 24px 46px #00000018;display:flex;flex-direction:column}
.local-card b{font-size:29px;line-height:1.2}.local-card span{font-size:54px;text-align:center;line-height:1.4}.local-card small{font-size:11px;align-self:center;border:1px solid #b58b45;border-radius:20px;padding:2px 8px;color:#8b652a}
.card-left{left:12px;top:22px;transform:rotate(-17deg)}.card-middle{z-index:2;left:86px;top:0;color:#b84039;transform:rotate(-3deg)}.card-right{left:161px;top:27px;transform:rotate(16deg)}
.local-keyboard{font-size:12px;color:#91a2a9}
.local-settings{padding:34px;border-radius:22px;background:linear-gradient(155deg,#ffffff0c,#ffffff04);border:1px solid #ffffff12;box-shadow:0 24px 64px #00000014}
.local-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px;font-size:19px;font-weight:650}.local-section-heading small{font-size:11px;color:#a8babf;font-weight:400}
.local-settings fieldset{border:0;padding:0;margin:0 0 27px;min-width:0}.local-settings legend{font-size:12px;letter-spacing:1px;color:#b8c5ca;padding:0;margin-bottom:12px}
.local-options{display:grid;gap:8px}.formats{grid-template-columns:1fr 1fr}.difficulties{grid-template-columns:repeat(4,1fr)}
.local-option{font:inherit;font-size:13px;min-height:46px;background:#10252d;color:#bac9ce;border:1px solid #ffffff12;border-radius:10px;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .12s}.local-option:hover{border-color:#dec59980;color:#f3e3c8}.local-option.active{background:#e7c99618;border-color:#e7c99690;color:#f6dcac}.local-option:active,.local-start:active{transform:scale(.97)}
.local-help{font-size:12px;line-height:1.7;color:#91a7af;margin:10px 0 0;min-height:21px}
.local-start{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;border:1px solid #e8cc9e;border-radius:11px;background:#e5c38b;color:#25323a;box-shadow:0 4px 14px #00000016;font:inherit;font-size:16px;font-weight:650;padding:0 20px;cursor:pointer;transition:background .16s,transform .12s}.local-start:hover{background:#efd4a8}.local-start:disabled{opacity:.6}
.local-entry-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:17px;font-size:11px;color:#91a7af}.local-text-button{font:inherit;background:none;border:0;padding:6px 0;cursor:pointer;color:#dec599;text-decoration:underline;text-underline-offset:4px}
.local-footer{border-top:1px solid #ffffff0d;padding:20px 0 0;font-size:11px;color:#7c929a;letter-spacing:1px}
.local-modal-backdrop{position:fixed;inset:0;background:#061015b8;backdrop-filter:blur(7px);z-index:10000;display:grid;place-items:center;padding:20px}.local-modal{width:min(440px,100%);box-sizing:border-box;padding:28px;border-radius:18px;border:1px solid #ffffff1c;background:#1b3039;box-shadow:0 24px 100px #00000055;color:#ecf0ef}.local-modal h2{margin:0 0 18px;font-size:22px}.local-modal p,.local-modal li{font-size:14px;line-height:1.9;color:#c9d2d4}.local-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.local-rules{width:min(560px,100%)}.local-rules ul{padding-left:20px}.local-rules li+li{margin-top:12px}
.local-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:30px;z-index:11000;display:grid;gap:8px;pointer-events:none}.local-toast{background:#213840f5;border:1px solid #ffffff24;box-shadow:0 6px 30px #00000035;border-radius:12px;padding:12px 20px;font-size:14px;color:#f5f0e5;max-width:80vw}.local-toast.error{border-color:#e68f73}
.local-boot{min-height:100svh;display:grid;place-items:center;background:#11242d;color:#e5c38b;font:18px system-ui}.language-select{display:none!important}
button:focus-visible{outline:2px solid #efcf98;outline-offset:4px}
@media(max-width:900px){.local-entry{gap:34px;grid-template-columns:1fr 390px}.local-settings{padding:27px}.local-lobby{padding:24px}.local-intro h1{font-size:62px}}
@media(max-width:700px){.local-lobby{padding:22px 20px 26px}.local-entry{grid-template-columns:1fr;gap:26px;padding:42px 0 28px}.local-intro{text-align:center}.local-intro h1{font-size:56px;margin:15px 0}.local-eyebrow{font-size:11px}.local-lead{font-size:15px;line-height:1.8}.local-cards{height:147px;margin:22px auto 8px;transform:scale(.75);transform-origin:top center}.local-keyboard{margin-top:0;font-size:11px}.local-settings{padding:25px}.local-section-heading{margin-bottom:25px}.local-footer{text-align:center;font-size:10px;line-height:1.8}.local-badge{font-size:10px}.local-section-heading small{font-size:10px}}

.online-entry{grid-template-columns:1fr 440px;gap:55px;padding-top:clamp(36px,7vh,80px)}
.online-intro h1,.online-entry .local-intro h1{font-size:clamp(42px,5.3vw,66px);letter-spacing:4px;white-space:nowrap}
.online-entry-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px}.online-entry-tabs .local-option{min-height:44px}
.online-field-label{display:block;font-size:12px;letter-spacing:.6px;color:#b8c5ca;margin-bottom:10px}
.online-input,.online-invite-link{box-sizing:border-box;display:block;width:100%;border:1px solid #ffffff20;background:#0b2028;color:#f6f1e7;border-radius:10px;padding:13px 14px;font:inherit;font-size:14px;outline:none;resize:vertical;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.online-input:focus,.online-invite-link:focus{border-color:#e7c99690;box-shadow:0 0 0 3px #e7c9960a}.online-input::placeholder{color:#6e8992}
.online-create-settings,.online-join-field{margin-top:24px}.online-create-settings fieldset{margin-bottom:22px}.online-error{color:#ffc1b4;background:#cc624815;border:1px solid #d9856640;border-radius:9px;padding:10px 13px;font-size:13px;line-height:1.7;margin:0 0 18px}
.online-room-content{padding:clamp(38px,7vh,78px) 0 46px}.online-room-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:35px}.online-room-heading h1{font-size:35px;letter-spacing:2px;margin:15px 0}.online-room-heading p{font-size:14px;color:#aebec4;margin:0;line-height:1.7}
.online-secondary{border:1px solid #ffffff25;background:#ffffff04;color:#becbd0;font:inherit;font-size:12px;padding:10px 16px;border-radius:9px;cursor:pointer;white-space:nowrap}.online-secondary:hover{background:#ffffff0b;color:#fff}
.online-room-layout{display:grid;grid-template-columns:1fr 390px;gap:36px;align-items:start}.online-seats{display:grid;gap:14px;grid-template-columns:1fr 1fr}.online-seat{display:flex;align-items:center;gap:13px;padding:24px 18px;min-height:126px;box-sizing:border-box;background:#ffffff06;border:1px solid #ffffff0f;border-radius:16px;position:relative}.online-seat.mine{border-color:#dcb67865;background:#c7a9710b}.online-seat.empty{border-style:dashed;background:transparent}.online-avatar{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;background:linear-gradient(140deg,#e8cc9e28,#e8cc9e12);color:#edcd96;border:1px solid #e8cc9e20;font-size:20px}.online-seat.empty .online-avatar{color:#8ba4ad;background:#ffffff05;border-color:#ffffff0d}.online-seat-details{display:flex;flex-direction:column;gap:8px;min-width:0}.online-seat-details strong{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}.online-seat-details>span{font-size:11px;color:#8ea7b0}.online-seat-state{position:absolute;right:13px;top:12px;font-size:10px;color:#90b6a1}.online-seat-state.away{color:#dcaa6b}.online-seat.empty .online-seat-state{color:#6c8790}
.online-room-actions{padding:28px}.online-room-actions .local-section-heading{margin-bottom:18px}.online-room-copy{font-size:13px;line-height:1.9;color:#aebfc4;white-space:pre-line;margin:0 0 21px}.online-share{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #dec59960;background:#e7c99612;color:#eed4ac;min-height:49px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer}.online-share:hover{background:#e7c99620}.online-share>span{font-size:20px}.online-expand-invite{display:block;margin:9px auto 0;font-size:11px}.online-invite-expanded{margin:14px 0 18px}.online-invite-expanded label{display:block;font-size:12px;color:#aebfc4;margin:0 0 8px}.online-invite-link{font-size:11px;word-break:break-all;min-height:66px}.online-invite-expanded small{font-size:10px;color:#8da4ae;line-height:1.6;display:block;margin-top:8px}.online-room-summary{border-top:1px solid #ffffff12;padding-top:19px;margin:22px 0 19px;display:flex;justify-content:space-between;gap:10px;color:#a6bbc2;font-size:11px}.online-wait-owner{display:grid;place-items:center;min-height:56px;border-radius:11px;background:#e7c9960a;border:1px solid #e7c99630;color:#e1caac;font-size:13px}
.online-status-dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#85b19a}.online-status-dot.reconnecting{background:#e4ae6e;animation:online-pulse 1.2s infinite}.online-reconnecting{display:flex;align-items:center;gap:9px;margin:-12px 0 23px;padding:10px 14px;border:1px solid #e4ae6e40;background:#e4ae6e0a;border-radius:10px;font-size:12px;color:#edc691;line-height:1.6}
.online-table{height:100dvh}.online-table>.shell>.bar .sub{display:none}.online-table-info{display:flex;align-items:center;gap:9px;padding:8px 15px;background:#142b35;border-bottom:1px solid #ffffff0c;flex:none;min-height:24px;font-size:11px;color:#adbec4}.online-table-room{color:#e7c996;white-space:nowrap}.online-table-players{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-table-info>.local-text-button{margin-left:auto;padding:0;white-space:nowrap;font-size:11px}.online-table-warning{color:#e6b27a;white-space:nowrap}
@keyframes online-pulse{50%{opacity:.35}}
@media(max-width:1020px){.online-room-layout{grid-template-columns:1fr 350px;gap:22px}.online-seats{grid-template-columns:1fr}.online-seat{min-height:86px;padding:17px 19px}.online-seat-details strong{max-width:220px}.online-room-actions{padding:25px}.online-entry{gap:30px;grid-template-columns:1fr 410px}}
@media(max-width:700px){.online-entry{grid-template-columns:1fr;padding-top:35px;gap:25px}.online-entry .local-intro h1{font-size:42px}.online-entry .local-cards{display:none}.online-entry .local-keyboard{margin-top:19px}.online-settings{padding:24px}.online-entry-tabs{margin-bottom:23px}.online-room-content{padding:34px 0 30px}.online-room-heading{align-items:start;margin-bottom:26px;gap:12px}.online-room-heading h1{font-size:26px;letter-spacing:1px;margin:13px 0}.online-room-heading .local-eyebrow{font-size:11px;letter-spacing:.5px}.online-room-heading p{font-size:12px}.online-secondary{font-size:10px;padding:8px 11px}.online-room-layout{grid-template-columns:1fr;gap:24px}.online-seats{grid-template-columns:1fr 1fr;gap:10px}.online-seat{min-height:124px;padding:28px 13px 16px;align-items:flex-start;gap:9px}.online-avatar{width:33px;height:37px;font-size:17px;border-radius:10px}.online-seat-details{gap:8px;padding-top:3px}.online-seat-details strong{font-size:13px;max-width:95px}.online-seat-details>span{font-size:10px;line-height:1.5;max-width:90px}.online-room-actions{padding:24px}.online-table-info{padding:6px 10px;font-size:10px;gap:7px;flex-wrap:wrap}.online-table-room{max-width:120px;overflow:hidden;text-overflow:ellipsis}.online-table-players{max-width:45vw}.online-table-warning{font-size:10px;max-width:60vw;overflow:hidden;text-overflow:ellipsis}}
@media(prefers-reduced-motion:reduce){.online-status-dot.reconnecting{animation:none}}

.online-seat-choice{margin:0 0 22px}.online-seat-choice select{min-height:48px}.online-seat-choice option{background:#0b2028;color:#f6f1e7}.online-seat-choice .local-help{margin-bottom:0}.online-seat{flex-wrap:wrap;padding-top:30px}.online-seat-details{flex:1}.online-seat-details>.online-seat-label{font-size:10px;letter-spacing:.3px;color:#ddc49d}.online-seat-take{flex-basis:100%;min-height:44px;border:1px solid #e7c99645;background:#e7c9960a;color:#edd2a7;border-radius:9px;font:inherit;font-size:12px;cursor:pointer}.online-seat-take:hover:not(:disabled){background:#e7c99620;border-color:#e7c99680}.online-seat-take:disabled{opacity:.45;cursor:default}.online-seat-take:focus-visible{outline:2px solid #efcf98;outline-offset:3px}
@media(max-width:700px){.online-seat{padding-top:29px;align-content:start}.online-seat-take{margin-top:2px}.online-seat-details>.online-seat-label{font-size:9px;line-height:1.5}}

.online-perspective-control{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;min-width:0}.online-perspective-control label{font-size:11px;color:#b8c5ca;white-space:nowrap}.online-perspective-control select{max-width:235px;min-height:32px;padding:4px 28px 4px 9px;border:1px solid #e7c99650;border-radius:8px;background:#0b2028;color:#f3dbb3;font:inherit;font-size:12px;cursor:pointer}.online-perspective-control select:focus-visible{outline:2px solid #efcf98;outline-offset:3px}.online-perspective-control select:disabled{opacity:.55;cursor:default}.online-perspective-status{color:#e6b27a;font-size:11px;line-height:1.6}.online-room-actions .online-perspective-control{margin:21px 0 0;padding-top:20px;border-top:1px solid #ffffff12}.online-room-actions .online-perspective-control select{flex:1;min-width:145px;max-width:none;min-height:40px}.online-room-actions .online-perspective-status{flex-basis:100%}.online-table-info{flex-wrap:wrap}.online-table-info .online-perspective-control{flex:1;min-width:min(100%,300px)}
@media(max-width:700px){.online-table-info .online-perspective-control{flex-basis:100%;order:1}.online-perspective-control select{max-width:min(66vw,240px)}.online-table-info .online-perspective-status{font-size:10px}.online-table-info>.local-text-button{margin-left:auto}}

/* One lobby: game modes lead to setup here, and a real host opens the table. */
body.ro-theme .online-entry .local-intro h1 { white-space: normal; font-size: clamp(34px,4vw,48px); letter-spacing: -.025em; }
.unified-mode-list { display: grid; gap: 11px; }
.unified-mode-card { display: flex; align-items: center; gap: 15px; width: 100%; min-height: 92px; padding: 13px 17px; text-align: left; color: #314b59; background: #fffdf7; border: 1px solid #c5d5df; border-radius: 10px; font: inherit; cursor: pointer; transition: background-color 160ms,border-color 160ms,transform 120ms; }
.unified-mode-card img { flex: 0 0 58px; width: 58px; height: 58px; object-fit: contain; }
.unified-mode-card > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.unified-mode-card strong { font-size: 15px; font-weight: 600; }
.unified-mode-card small { font-size: 12px; color: #627887; }
.unified-mode-card > span:last-child { margin-left: auto; color: #6d9bb9; }
.unified-mode-card:disabled { opacity: .5; cursor: default; }
.unified-profile { border-top: 1px solid #dce7ec; margin-top: 23px; padding-top: 13px; }
.unified-profile summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: #627887; list-style: none; font-size: 13px; }
.unified-profile summary::-webkit-details-marker { display: none; }
.unified-profile summary img { width: 35px; height: 35px; object-fit: contain; }
.unified-profile summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unified-profile summary > small { flex: 0 0 auto; margin-left: auto; color: #557f99; font-size: 11px; }
.unified-profile-fields { padding-top: 17px; }
.unified-profile-fields .ro-companions { margin-bottom: 4px; }
.unified-setup-title { margin: 8px 0 22px; font: 600 21px/1.3 var(--font-ui); color: #314b59; }
.unified-back { margin: -6px 0 4px; }
.unified-profile summary:focus-visible { outline: 3px solid #557f99; outline-offset: 3px; border-radius: 5px; }
@media (hover:hover) { .unified-mode-card:hover:not(:disabled) { background: #f1f7fa; border-color: #8bb0c6; } }
.unified-mode-card:active:not(:disabled) { transform: scale(.98); }
@media(max-width:700px) { .unified-mode-card { min-height: 82px; padding: 11px 13px; gap: 12px; } .unified-mode-card img { width: 50px; height: 50px; flex-basis: 50px; } .unified-home .local-section-heading { margin-bottom: 21px; } }
@media(prefers-reduced-motion:reduce) { .unified-mode-card { transition: none; } .unified-mode-card:active:not(:disabled) { transform: none; } }

/* Waiting-room AI settings distinguish ready computer seats from open human seats. */
.online-bot-count { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #dce7ec; }
.online-bot-count .online-field-label { color: #627887; margin-bottom: 9px; }
.online-bot-count select { min-height: 45px; }
.online-bot-count option { color: #314b59; background: #fffdf7; }
.online-bot-count-value { display: block; color: #314b59; font-size: 14px; font-weight: 600; }
.online-seat.is-open .online-avatar { color: #8ca5b1; background: #f1f7fa; border: 1px dashed #b3cbd6; }
.online-open-seat-symbol { font: 300 32px/1 var(--font-ui); }
.online-seat.is-ai .online-seat-state { color: #557f99; }
.online-room-readiness { min-height: 38px; }

/* Prontera production screens share the chosen design, backed by real room state. */
body.ro-theme .online-app .local-lobby { position:relative; isolation:isolate; padding:25px max(24px,calc((100vw - 1200px)/2)) 30px; }
body.ro-theme .online-app .local-lobby::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url('/guandan/assets/ro-prontera.png') center 42% / cover no-repeat; opacity:.055; }
body.ro-theme .online-app .ro-world-header { max-width:1200px; margin:auto; }
.online-app .ro-brand-button:disabled { opacity:1; cursor:default; }
.online-app .ro-profile:disabled { opacity:1; cursor:default; }
.online-app .online-header-state { font-size:13px; color:#627887; }
.online-app .ro-settings-trigger { display:grid; place-items:center; flex:none; width:40px; height:40px; padding:0; color:#557f99; border:1px solid transparent; border-radius:8px; background:transparent; font:23px/1 var(--font-ui); cursor:pointer; transition:background-color 160ms,border-color 160ms,transform 120ms; }
.online-app .ro-settings-trigger:hover { background:#eaf2f7; border-color:#c5d5df; }
.online-app .ro-settings-trigger:active { transform:scale(.96); }
.online-app .ro-lobby-layout { max-width:1130px; margin:0 auto; }
.online-app .ro-lobby-welcome { display:flex; align-items:center; justify-content:space-between; min-height:193px; gap:24px; padding:16px 12px 20px; }
.online-app .ro-welcome-copy h1 { margin:8px 0 15px; font:500 39px/1.15 var(--font-display); letter-spacing:-.015em; color:#314b59; }
.online-app .ro-welcome-copy .local-eyebrow { margin:0; }
.online-app .ro-hero-plaque { display:inline-flex; align-items:center; min-height:40px; padding:6px 15px; background:#fffdf7b8; border:1px solid #b3cbd680; border-radius:6px; color:#627887; font-size:12px; box-shadow:0 3px 15px #34536606; }
.online-app .ro-lobby-pet { display:block; width:200px; height:166px; object-fit:contain; margin-right:45px; }
.online-app .ro-lobby-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.online-app .ro-mode-card { display:flex; flex-direction:column; align-items:flex-start; position:relative; min-height:245px; box-sizing:border-box; padding:26px 27px 24px; color:#314b59; border:1px solid #b3cbd6; border-top:5px solid #80b5d5; border-radius:8px; background:#fffdf7f5; box-shadow:var(--shadow); font:inherit; text-align:left; overflow:hidden; cursor:pointer; transition:transform 160ms,border-color 160ms,box-shadow 160ms,background-color 160ms; }
.online-app .ro-mode-card::after { content:''; position:absolute; inset:0; pointer-events:none; background:url('/guandan/assets/ro-prontera.png') right bottom / auto 115% no-repeat; opacity:.035; }
.online-app .ro-mode-icon { display:block; width:37px; height:37px; color:#6d9bb9; margin-bottom:18px; }
.online-app .ro-mode-icon svg { width:100%; height:100%; }
.online-app .ro-mode-card > small { color:#627887; letter-spacing:.12em; font-size:10px; font-weight:600; }
.online-app .ro-mode-card h2 { margin:6px 0 9px; font:500 29px/1.15 var(--font-display); color:#314b59; }
.online-app .ro-mode-card p { margin:0 0 23px; font-size:13px; color:#627887; line-height:1.6; }
.online-app .ro-mode-link { display:flex; align-items:center; gap:12px; margin-top:auto; color:#557f99; font-size:13px; }
.online-app .ro-mode-link > span { font-size:18px; }
.online-app .ro-mode-card:disabled { opacity:.55; cursor:default; }
.online-app .ro-lobby-lower { display:grid; grid-template-columns:1.13fr 1fr; gap:18px; margin-top:18px; }
body.ro-theme .online-app .ro-quick-start { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px; padding:22px 25px; }
.online-app .ro-quick-start h3 { margin:5px 0 0; font:500 20px/1.2 var(--font-display); }
.online-app .ro-quick-start .local-eyebrow { margin:0; font-size:10px; }
.online-app .ro-quick-start .local-options { flex:1; min-width:210px; gap:5px; }
.online-app .ro-quick-start .local-option { padding:8px 7px; min-height:42px; font-size:12px; }
.online-app .ro-lobby-options > .local-entry-footer { margin:14px 2px 20px; }
.online-app .ro-production-lobby > .local-footer { max-width:1130px; margin:0 auto; color:#627887; }
.online-app .ro-setup-layout { max-width:1050px; margin:auto; }
.online-app .online-setup-profile { display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:9px 0 16px; border-bottom:1px solid #dce7ec; font-size:13px; color:#627887; }
.online-app .online-setup-profile img { width:38px; height:38px; object-fit:contain; }
.online-app .online-setup-profile > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.online-app .online-setup-profile .local-text-button { margin-left:auto; white-space:nowrap; }
.online-app .online-settings { padding:29px; }
.online-app .online-settings .local-text-button.unified-back { margin-bottom:8px; }
.online-app .online-settings .online-seat-choice option { color:#314b59; background:#fffdf7; }
.online-app .online-settings .online-entry-tabs { margin-bottom:20px; }
.online-app .online-settings .local-help { min-height:0; }
.online-app .online-settings .online-create-settings { margin-top:19px; }
.online-app .online-room-content { max-width:1130px; margin:auto; padding-top:35px; }
.online-app .online-room-heading { align-items:center; margin-bottom:26px; }
.online-app .online-room-heading h1 { margin:7px 0 9px; font-size:36px; }
.online-app .online-room-heading p { color:#627887; font-size:13px; }
.online-app .online-room-heading .local-eyebrow { font-size:11px; }
body.ro-theme .online-app .online-room-layout { grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:24px; align-items:start; }
body.ro-theme .online-app .ro-room-seat-map { display:grid; position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:530px; box-sizing:border-box; gap:130px 20px; align-content:center; padding:27px; border:1px solid #b3cbd6; border-radius:10px; background:#fffdf7d9; box-shadow:var(--shadow); }
.online-app .ro-room-seat-map::before { content:''; position:absolute; inset:19% 16%; border:1px solid #b3cbd685; border-radius:45%; pointer-events:none; }
.online-app .ro-room-seat-map::after { content:''; position:absolute; inset:0; pointer-events:none; background:url('/guandan/assets/ro-prontera.png') center / cover no-repeat; opacity:.035; border-radius:inherit; }
body.ro-theme .online-app .ro-room-seat-map .online-seat { display:flex; align-items:center; align-content:center; gap:9px; min-height:130px; padding:26px 12px 12px; z-index:1; color:#314b59; background:#fffdf7f5; border:1px solid #b3cbd6; border-radius:8px; }
body.ro-theme .online-app .ro-room-seat-map .online-seat.mine { border-color:#6d9bb9; box-shadow:0 0 0 1px #6d9bb91c; background:#edf5fa; }
body.ro-theme .online-app .ro-room-seat-map .online-seat.is-open { border-style:dashed; background:#f7faf9d9; }
.online-app .ro-room-seat-map .online-avatar { width:42px; height:46px; padding:0; border:0; border-radius:0; background:none; }
.online-app .ro-room-seat-map .online-avatar img { width:100%; height:100%; object-fit:contain; }
.online-app .ro-room-seat-map .online-seat-details { gap:5px; }
.online-app .ro-room-seat-map .online-seat-details strong { max-width:130px; font-size:13px; }
.online-app .ro-room-seat-map .online-seat-details > span { color:#627887; font-size:11px; line-height:1.4; }
.online-app .ro-room-seat-map .online-seat-details > .online-seat-label { color:#557f99; font-size:10px; }
.online-app .ro-room-seat-map .online-seat-state { top:9px; right:11px; color:#627887; font-size:10px; }
.online-app .ro-room-seat-map .online-seat-state.away { color:#9e6844; }
.online-app .ro-room-seat-map .online-seat-take { flex-basis:100%; min-height:40px; margin-top:4px; padding:5px; color:#557f99; background:#eaf2f77d; border-color:#b3cbd680; font-size:12px; }
.online-app .ro-room-center { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:8px; white-space:nowrap; color:#627887; pointer-events:none; }
.online-app .ro-room-center > span { color:#6d9bb9; font-size:38px; line-height:1; }
.online-app .ro-room-center strong { font:500 29px/1.1 var(--font-display); color:#314b59; }
.online-app .ro-room-center small { font-size:12px; }
.online-app .online-room-actions .local-section-heading { margin-bottom:21px; font-size:22px; font-family:var(--font-display); }
.online-app .online-room-actions .local-section-heading small { flex-basis:100%; font-family:var(--font-ui); font-size:11px; }
.online-app .online-room-actions .online-share { min-height:46px; color:#557f99; border-color:#b3cbd6; background:#eaf2f7; }
.online-app .online-room-actions .online-expand-invite { color:#627887; font-size:12px; }
.online-app .online-room-actions .online-room-summary { flex-wrap:wrap; border-color:#dce7ec; color:#627887; font-size:12px; }
.online-app .online-room-actions .online-wait-owner { color:#557f99; background:#eaf2f7; border-color:#b3cbd6; }
.online-app .online-room-actions .online-room-readiness { color:#627887; min-height:0; margin-top:15px; }
.online-app .online-room-actions .online-perspective-control { border-color:#dce7ec; }
.online-app .online-room-actions .online-perspective-control label,.online-app .online-room-actions .online-perspective-status { color:#627887; }
@media(hover:hover) {
  .online-app .ro-mode-card:hover:not(:disabled) { transform:translateY(-3px); border-color:#6d9bb9; box-shadow:0 8px 24px #314b5918; background:#fffefb; }
}
.online-app .ro-mode-card:active:not(:disabled),.online-app .online-seat-take:active:not(:disabled) { transform:scale(.96); }
@media(max-width:1040px) {
  .online-app .ro-lobby-lower { grid-template-columns:1fr 1fr; }
  body.ro-theme .online-app .ro-quick-start { padding:20px; }
  .online-app .ro-quick-start .local-options { flex-basis:100%; }
  body.ro-theme .online-app .online-room-layout { grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr); gap:20px; }
  body.ro-theme .online-app .ro-room-seat-map { gap:130px 12px; padding:21px 14px; }
  body.ro-theme .online-app .ro-room-seat-map .online-seat { flex-direction:column; text-align:center; min-height:163px; padding:25px 9px 12px; }
  .online-app .ro-room-seat-map .online-seat-details strong { max-width:100%; }
}
@media(max-width:760px) {
  body.ro-theme .online-app .local-lobby { padding:19px 18px 28px; }
  .online-app .ro-lobby-welcome { min-height:130px; padding:20px 0; }
  .online-app .ro-welcome-copy h1 { font-size:32px; }
  .online-app .ro-lobby-pet { width:140px; height:122px; margin-right:0; }
  .online-app .ro-lobby-mode-grid { grid-template-columns:1fr; gap:13px; }
  .online-app .ro-mode-card { min-height:150px; padding:20px 23px 20px 89px; border-top-width:1px; border-left:5px solid #80b5d5; }
  .online-app .ro-mode-icon { position:absolute; top:37px; left:23px; width:37px; height:37px; }
  .online-app .ro-mode-card h2 { font-size:26px; margin:5px 0 7px; }
  .online-app .ro-mode-card > small { font-size:9px; }
  .online-app .ro-mode-card p { margin:0 0 10px; font-size:12px; }
  .online-app .ro-mode-link { font-size:12px; }
  .online-app .ro-lobby-lower { grid-template-columns:1fr; gap:13px; margin-top:13px; }
  body.ro-theme .online-app .ro-quick-start { padding:20px; }
  .online-app .ro-quick-start .local-options { flex-basis:auto; }
  body.ro-theme .online-app .ro-setup-layout { grid-template-columns:1fr; padding-top:25px; gap:20px; }
  .online-app .ro-setup-layout .local-intro { display:none; }
  .online-app .ro-setup-layout .local-settings { padding:23px 20px; }
  body.ro-theme .online-app .online-room-layout { grid-template-columns:1fr; }
  .online-app .online-room-content { padding-top:26px; }
  .online-app .online-room-heading h1 { font-size:30px; }
  body.ro-theme .online-app .ro-room-seat-map { min-height:460px; gap:120px 14px; padding:22px 16px; }
  body.ro-theme .online-app .ro-room-seat-map .online-seat { flex-direction:row; align-items:center; text-align:left; min-height:135px; padding:25px 11px 12px; }
  .online-app .ro-room-seat-map .online-seat-details { flex:1; }
  .online-app .ro-room-seat-map .online-seat-details strong { max-width:calc((100vw - 175px)/2); }
  .online-app .ro-room-center strong { font-size:25px; }
  .online-app .ro-room-center > span { font-size:30px; }
  .online-app .online-room-heading .online-secondary { min-height:40px; }
}
@media(max-width:430px) {
  .online-app .ro-lobby-welcome { min-height:110px; }
  .online-app .ro-lobby-pet { width:105px; height:110px; }
  .online-app .ro-quick-start .local-options { flex-basis:100%; }
  .online-app .ro-quick-start .difficulties { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .online-app .ro-quick-start .local-option { font-size:11px; min-height:42px; padding-inline:4px; }
  body.ro-theme .online-app .ro-room-seat-map { gap:120px 12px; padding:20px 12px; }
  body.ro-theme .online-app .ro-room-seat-map .online-seat { flex-direction:column; text-align:center; min-height:168px; gap:6px; }
  .online-app .ro-room-seat-map .online-seat-details strong { max-width:110px; }
  .online-app .ro-room-seat-map .online-seat-details > .online-seat-label { font-size:10px; }
  .online-app .ro-room-seat-map .online-seat-details > span { font-size:11px; }
  .online-app .ro-room-seat-map .online-seat-take { width:100%; flex-basis:auto; }
  .online-app .ro-room-seat-map .online-avatar { width:39px; height:39px; }
}
@media(prefers-reduced-motion:reduce) {
  .online-app .ro-mode-card,.online-app .ro-settings-trigger { transition:none; }
  .online-app .ro-mode-card:hover:not(:disabled),.online-app .ro-mode-card:active:not(:disabled),.online-app .ro-settings-trigger:active,.online-app .online-seat-take:active:not(:disabled) { transform:none; }
}