.online-entry .join-card{max-width:440px;width:min(90vw,440px)}
.online-entry select{width:100%;background:#101716;border:1px solid #59635a;color:#f4e6d1;padding:11px}
.online-entry .online-user{color:#d6c49c;font-size:11px;overflow-wrap:anywhere}
.online-entry .join-card p{font-size:12px;color:#b6bcb1;line-height:1.6}
.online-entry a{font-size:11px;color:#dbc28b}
.online-player-elenco{padding:10px 12px;border-bottom:1px solid #485247;display:grid;gap:8px}
.online-my-entry{background:#252f2b;color:#e6d8bc;border:1px solid #586859;padding:9px;text-align:left;font-size:11px;line-height:1.5;width:100%;overflow-wrap:anywhere}
.online-my-entry:focus,.online-my-entry:hover{border-color:#d6b078;background:#354036}
body.online-player .left-panel > :not(#online-player-elenco):not(.logo-block){display:none!important}
body.online-player .left-panel{overflow-y:auto}
body.online-player .online-player-elenco{display:grid!important}
body.online-player #copy-invite,body.online-player #backup-identity{display:none!important}
body.online-mode #backup-identity{display:none!important}
body.online-player #copy-invite{display:none!important}
@media(max-width:800px){body.online-mode{min-width:690px}.online-entry .join-card{width:min(95vw,440px)}}

.online-entry::before{pointer-events:none!important}

.online-invite-divider{font-size:10px;color:#c7b28d;text-align:center;border-top:1px solid #4d584a;margin:15px 0 5px;padding-top:14px;letter-spacing:.09em}
.online-entry input{background:#101716!important;border:1px solid #59635a!important;color:#f4e6d1!important;padding:11px!important;width:100%!important;font-size:13px}
.online-invite-note{font-size:11px!important;color:#a9b1a5!important}
#online-join-invite{margin:9px 0 2px;width:100%;min-height:42px}
.online-invite-dialog{width:min(90vw,440px);border:1px solid #947751;border-radius:10px;background:#1a201d;color:#efe4cd;box-shadow:0 20px 65px #000a;padding:20px}
.online-invite-dialog::backdrop{background:#000b;backdrop-filter:blur(2px)}
.online-invite-dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:20px}
.online-invite-dialog-head button{background:#342c27;color:#e4cda1;border:1px solid #6c5b45;border-radius:5px;width:31px;height:31px;font-size:23px;line-height:1;display:grid;place-items:center}
.online-invite-dialog p{font-size:12px;line-height:1.6;margin-bottom:13px}
#online-generated-invite{font-size:20px!important;letter-spacing:.13em;text-align:center;width:100%;color:#e6d19b;background:#121814;border:1px solid #6c5841;border-radius:6px;padding:12px 4px}
#online-copy-generated{margin-top:12px;width:100%}

/* 0.5.5.1: login sempre mostra instruções e oferece recuperação, inclusive no Edge. */
.online-login-help{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}
.online-login-help a,.online-login-help button{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.5;white-space:normal;min-height:45px;font-size:10px;padding:8px 6px}
#online-user{display:block;margin:10px 0;min-height:24px;font-size:12px;font-weight:700;line-height:1.5}
#online-error:not(:empty){background:#392723;border:1px solid #a0604c;border-radius:7px;padding:12px;color:#ffe0c8!important;font-size:12px!important;line-height:1.55}
#online-chronicle:disabled,#online-enter:disabled{opacity:.66}
@media(max-width:440px){.online-login-help{grid-template-columns:1fr}}

/* NOCTIS 0.5.5.3 — exclusão individual das fichas do jogador. */
.online-my-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:6px;align-items:stretch}
.online-my-row .online-my-entry{min-width:0;width:100%;margin:0}
.online-my-delete{display:grid;place-items:center;min-width:34px;min-height:34px;border:1px solid #805953;border-radius:4px;background:#312522;color:#f0c8bd;font-size:23px;line-height:1;cursor:pointer}
.online-my-delete:hover{background:#57312e;border-color:#b87f73}
.online-my-delete:disabled{opacity:.5;cursor:wait}

/* 0.5.8.5 — layout da Biblioteca de Cenas R2 (sem alterar operações R2/Supabase). */
.scene-library-dialog{
  width:min(720px,95vw);max-width:95vw;max-height:85vh;overflow-y:auto;
  background:#1c1b18;color:#e9dfc9;border:1px solid #967847;
  border-radius:12px;padding:24px;box-shadow:0 25px 70px #000b;
}
.scene-library-dialog::backdrop{background:rgba(0,0,0,.72)}
.scene-library-dialog .online-invite-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.scene-library-dialog .online-invite-dialog-head button{width:38px;min-width:38px;height:38px;padding:0;display:grid;place-items:center;font-size:22px}
.scene-library-dialog>p{line-height:1.45}
.scene-library-actions{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.scene-library-actions button{flex:1 1 165px;min-width:0}
.scene-library-list{
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px;
  margin:10px 0;max-height:45vh;overflow-y:auto;overflow-x:hidden;
}
.online-scene-entry{
  min-width:0;display:grid;grid-template-columns:64px minmax(0,1fr) 124px;
  align-items:center;gap:12px;padding:12px;background:#27251f;
  border:1px solid #4b4132;border-radius:8px;
}
.online-scene-preview{
  width:64px;height:54px;display:grid;place-items:center;overflow:hidden;
  background:#39342b center/cover no-repeat;border:1px solid #655543;border-radius:5px;
}
.online-scene-preview::before{content:'▧';font-size:27px;color:#b39a73;opacity:.8}
.online-scene-preview.has-image::before{content:none}
.online-scene-label{min-width:0;max-width:100%;display:grid;gap:5px;overflow:hidden}
.online-scene-label strong{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13px;line-height:1.35;
}
.online-scene-label small{display:block;color:#c5af85;font-size:11px}
/* Corrige o width:100% global de .action-outline que espremia o nome letra por letra. */
.online-scene-entry .action-outline{
  width:124px;min-width:0;max-width:100%;flex:none;
  padding:10px 8px;white-space:nowrap;text-align:center;
  font-size:9px;letter-spacing:.4px;
}
#scene-library-status{font-size:12px;color:#d6bd88;min-height:1.4em}
@media(max-width:600px){
  .scene-library-dialog{padding:16px;max-width:95vw}
  .online-scene-entry{grid-template-columns:56px minmax(0,1fr);gap:10px}
  .online-scene-preview{width:56px;height:48px}
  .online-scene-entry .action-outline{grid-column:1/-1;width:100%;max-width:none}
  .scene-library-actions button{flex:1 1 100%}
}

/* NOCTIS 0.5.8.6 — criação e controle individual de tokens de PCs. */
.online-my-row{grid-template-columns:minmax(0,1fr) 65px 34px}
.online-my-token{border:1px solid #857052;background:#3d3226;color:#f1d6a6;border-radius:4px;font-weight:700;font-size:10px;min-width:0;cursor:pointer}
.online-my-token:hover{border-color:#d4b57c;background:#59462f}
.token-character-row{display:grid;gap:7px;margin-bottom:12px}
.token-character-row select{min-width:0;width:100%;background:#1a1e1b;border:1px solid #6c5f48;color:#ead9ba;padding:10px}
.player-token-inspector{padding:12px;border:1px solid #846a46;border-radius:6px;background:#2a261f;display:grid;gap:9px}
.player-token-inspector.hidden{display:none!important}
.player-token-inspector strong{overflow-wrap:anywhere;color:#e9d5af;font-size:12px}
.player-token-inspector label{font-size:10px;color:#c8b18a}
.player-token-inspector input[type=range]{width:100%}
.player-token-inspector .action-outline{margin:0;min-width:0;white-space:normal}

/* 0.5.8.7 — controle persistente de presença do token na mesa */
.online-my-row{grid-template-columns:minmax(0,1fr) 65px 34px;row-gap:5px}
.online-my-presence{grid-column:1/-1;width:100%;min-width:0;padding:7px 5px;border:1px solid #7a6851;border-radius:3px;color:#edcf9f;background:#312c25;font:700 9px 'IBM Plex Mono',monospace;cursor:pointer;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.online-my-presence:hover,.presence-object:hover{background:#4b3b2e;color:#ffe2ad}
.object-entry{grid-template-columns:18px minmax(0,1fr) 24px 24px 24px!important}
.object-entry .presence-object,.object-entry .presence-placeholder{display:flex;align-items:center;justify-content:center;min-width:0;width:24px;height:26px;align-self:center;justify-self:center}
.object-entry .presence-object{font-size:21px;background:transparent;border:0;color:#d4ae7c;padding:0;cursor:pointer}
.object-entry .presence-object:disabled{opacity:.4}
.object-entry.is-collapsed{background:#302a23!important;border:1px dashed #ad835a!important}
.object-entry.is-collapsed .object-title{color:#e8c39a}
#toggle-token-presence{display:block;white-space:normal}
#toggle-token-presence.hidden{display:none!important}