#remote{max-width:1440px}.remote-panel{background:#faf7ed;border:1px solid #d8cfba;border-radius:14px;padding:22px;margin:18px 0}.remote-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.remote-toolbar h2{margin-right:auto}.room-code{font-size:30px;letter-spacing:5px}.remote-error{color:#852d22;font-weight:700;min-height:24px}.remote-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr);gap:18px}.remote-hand{display:flex;flex-wrap:wrap;gap:10px}.remote-hand button{max-width:190px;white-space:normal;text-align:left;display:flex;flex-direction:column;gap:8px}.remote-hand button small{font-size:12px}.remote-panel label{display:block;margin:12px 0}.remote-panel select,.remote-panel input{max-width:100%;padding:10px}.remote-note{background:#e3eadb;padding:14px;border-radius:8px;white-space:pre-wrap}.remote-wait{color:#596b51}.remote-roster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.remote-roster img{width:100%;height:150px;object-fit:cover}.remote-roster article{position:relative;background:#faf7ed;border:1px solid #d8cfba;border-radius:9px;overflow:hidden}.remote-roster article.active{outline:3px solid #bd963e}.remote-roster article.you{border:3px solid #2d6143}.remote-roster article>div{padding:8px}.remote-roster small{display:block}.remote-banner{position:absolute;top:78px;left:0;right:0;transform:rotate(-8deg);background:#672e24;color:white;text-align:center;font-weight:bold;font-size:12px;padding:6px}.remote-log{max-height:280px;overflow:auto}.remote-log p{border-bottom:1px solid #d8cfba;padding-bottom:8px}.remote-map svg{width:100%;height:auto}.remote-panel button{margin:4px}.remote-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}button:disabled{opacity:.5}.remote-panel a{color:#275f42}@media(max-width:850px){.remote-layout{grid-template-columns:1fr}.remote-roster{grid-template-columns:repeat(4,minmax(0,1fr))}.remote-roster img{height:130px}}@media(max-width:500px){.remote-roster{grid-template-columns:repeat(2,minmax(0,1fr))}.remote-panel{padding:14px}.remote-hand button{max-width:46%}}
#remote .remote-panel{color:#263e32}.battle-mode>main#remote{display:block;max-width:none;padding:0;margin:0}.battle-mode #remote>.remote-toolbar{padding:12px 20px;color:#fff7df}.battle-mode #remote>#remote-error{padding:0 20px}

.visibility-toggle{display:flex!important;align-items:center;gap:10px;font-weight:bold}.visibility-toggle input{width:20px;height:20px;accent-color:#2d6143}.public-game-list{display:grid;gap:12px}.public-game-card{border:1px solid #d8cfba;border-radius:10px;padding:14px;background:#fffdf5}.public-game-card h3{margin-top:0}.public-game-card ul{padding-left:20px}#public-games{border-top:1px solid #d8cfba;margin-top:24px;padding-top:10px}

/* Stack room-setting labels above equal-width dropdowns. */
.remote-layout>div:first-child>label:not(.visibility-toggle){display:grid;grid-template-columns:minmax(0,1fr);gap:6px;width:100%;max-width:360px}
.remote-layout>div:first-child>label>select{display:block;width:100%;min-width:0;min-height:44px;box-sizing:border-box}

/* Match the other portrait status banners. */
.remote-traitor-banner{top:78px}

.remote-you-banner{background:#274e38}