/* ===== YOINE two-device room sync ===== */
.room-sync-section{margin:28px auto;padding:clamp(20px,4vw,36px);border:1px solid rgba(220,190,115,.48);border-radius:22px;background:linear-gradient(145deg,rgba(10,25,48,.95),rgba(18,37,65,.94));box-shadow:0 18px 54px rgba(0,0,0,.28)}
.room-sync-heading{text-align:center;margin-bottom:24px}.room-sync-heading h2{margin:.2em 0;font-size:clamp(27px,4vw,42px)}.room-sync-heading p{line-height:1.8;opacity:.82}
.room-sync-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.room-sync-card{display:flex;flex-direction:column;gap:13px;padding:22px;border:1px solid rgba(220,190,115,.3);border-radius:17px;background:rgba(3,13,29,.42)}
.room-sync-card h3{margin:0;font-size:24px}.room-sync-card p{margin:0;line-height:1.75;opacity:.82}.room-sync-label{font-size:12px;letter-spacing:.15em;color:#e4c879}
.room-sync-card label{display:grid;gap:7px;font-weight:700}.room-sync-card select,.room-sync-card input{width:100%;padding:12px 13px;border:1px solid rgba(220,190,115,.4);border-radius:10px;background:rgba(2,10,24,.8);color:#fff;font:inherit}
.room-sync-code{text-transform:uppercase;text-align:center;letter-spacing:.25em;font-size:23px!important;font-weight:800}.room-sync-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}.room-sync-actions button{flex:1 1 180px}
.room-sync-message{min-height:25px;margin:16px 0 0;text-align:center;line-height:1.7;opacity:.85}.room-sync-message.success{color:#bdeac7}.room-sync-message.error{color:#ffb4b4}.room-sync-note{margin:18px auto 0;max-width:780px;font-size:13px;line-height:1.8;text-align:center;opacity:.7}
.offline-room-details{margin:22px auto}.offline-room-details>summary{cursor:pointer;padding:15px 18px;border:1px solid rgba(220,190,115,.34);border-radius:14px;background:rgba(5,18,38,.65);font-weight:700}.offline-room-details[open]>summary{margin-bottom:16px}
.room-panel{margin:18px 0 24px;padding:20px;border:1px solid rgba(220,190,115,.55);border-radius:18px;background:linear-gradient(145deg,rgba(8,25,48,.97),rgba(19,39,68,.95));box-shadow:0 14px 40px rgba(0,0,0,.24)}
.room-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.room-online-label{font-size:11px;letter-spacing:.18em;color:#e4c879}.room-panel h2{margin:4px 0;font-size:28px}.room-panel p{line-height:1.65}.room-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:16px 0}.room-player{padding:13px;border:1px solid rgba(220,190,115,.25);border-radius:13px;background:rgba(0,0,0,.14)}.room-player strong,.room-player span,.room-player div{display:block}.room-player span{margin:4px 0 8px;opacity:.75}
.room-dot{display:inline-block!important;width:9px;height:9px;border-radius:99px;margin-right:7px;background:#718096}.room-dot.joined{background:#e4c879;box-shadow:0 0 8px rgba(228,200,121,.55)}.room-dot.ready{background:#75d28c;box-shadow:0 0 8px rgba(117,210,140,.55)}
.room-status-message{min-height:24px;margin:10px 0}.room-status-message.success{color:#bdeac7}.room-status-message.error{color:#ffb4b4}.room-panel-actions{display:flex;flex-wrap:wrap;gap:9px}.room-panel-actions a{text-decoration:none}.room-privacy{font-size:12px;opacity:.68;margin-bottom:0}.room-panel.started{padding-top:13px;padding-bottom:13px}.room-panel.started .room-player-grid,.room-panel.started .room-privacy{display:none}.room-panel.started .room-panel-head p{display:none}
body.room-waiting main>:not(header):not(.site-header):not(.topline):not(#roomPanel){display:none!important}body.room-waiting #roomPanel{display:block!important}.room-hidden{display:none!important}
@media(max-width:720px){.room-sync-grid,.room-player-grid{grid-template-columns:1fr}.room-panel-head{flex-direction:column}.room-panel-actions>*{flex:1 1 44%;text-align:center}.room-sync-section{padding:20px 15px}}

/* 2026-07 visible navigation and room CTA fix */
.hero-online-cta{display:inline-flex;margin-top:18px;padding:13px 20px;border:1px solid rgba(238,204,120,.75);border-radius:999px;background:linear-gradient(135deg,#9b1f2d,#d24750);color:#fff!important;text-decoration:none;font-weight:900;letter-spacing:.04em;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.hero-online-cta:hover,.hero-online-cta:focus-visible{transform:translateY(-2px);filter:brightness(1.08);outline:2px solid rgba(255,230,166,.82);outline-offset:3px}
.library-header-link{display:inline-flex;align-items:center;padding:8px 13px;border:1px solid rgba(232,211,166,.48);border-radius:999px;color:#f7e8c9!important;text-decoration:none!important;font-size:12px;font-weight:800;letter-spacing:.04em;background:rgba(6,17,29,.58)}
.header-actions{display:flex;align-items:center;gap:12px}
.room-sync-section{scroll-margin-top:18px}
@media(max-width:640px){.library-header-link{font-size:11px;padding:7px 10px}.header-actions .case-label{display:none}.hero-online-cta{width:100%;justify-content:center}.yoine-library-link{display:none!important}}