.player-overlay { padding: 0; align-items: stretch; justify-content: flex-start; }
.player-web { width: 100%; min-height: 100%; background: var(--leaf); border: 0; border-radius: 0; overflow: visible; }
.player-web-header { min-height: 76px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; }
.player-web-header .brand { margin: 0; }
.player-web .phone-exit { position:static; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font:600 12.5px var(--sans); padding:8px 10px; border-radius:var(--radius); margin-left:16px; }
.player-web .player-kicker { margin:0; color:var(--lime); font:11.5px var(--mono); letter-spacing:.12em; }
.player-web-body { display:grid; grid-template-columns:218px minmax(0, 1fr); min-height:calc(100dvh - 76px); }
.player-side { border-right:1px solid var(--line); padding:42px 25px; }
.player-avatar { display:grid; place-items:center; width:52px; height:52px; border-radius:var(--radius); background:var(--lapis-wash); color:var(--on-vermilion); font-weight:800; font-size:22px; }
.player-side h2 { font-size:30px; margin:17px 0 2px; }
.player-side p { margin:0; color:var(--muted); font-size:12.5px; }
.player-side nav { margin-top:36px; display:grid; gap:5px; }
.player-web .phone-tab { border:0; background:transparent; color:var(--muted); padding:11px 10px; border-radius:var(--radius); text-align:left; font:600 12.5px var(--sans); }
.player-web .phone-tab.active { color:var(--ink); background:color-mix(in srgb,var(--vermilion) 8%,transparent); box-shadow:inset 2px 0 0 var(--lime); }
.player-content { width:100%; max-width:1440px; min-width:0; padding:42px 5.8vw 55px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; align-items:start; }
.player-content > * { min-width:0; overflow-wrap:anywhere; }
.player-content .npc-player-section { margin-top:0; }
.player-side label { display:grid; gap:8px; margin-top:22px; color:var(--muted); font-size:12.5px; }
.player-side select { min-width:0; }
.player-web-header > div:last-child { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.player-web .request-card { padding:27px; }
.player-web .request-card h3 { font-size:30px; }
.player-web .request-card p { font-size:15px; }
@media(max-width:1100px) { .player-content { grid-template-columns:minmax(0, 1fr); } .player-content .npc-player-section { margin-top:12px; } }
@media(max-width:900px) { .player-web-body { grid-template-columns:190px minmax(0, 1fr); } .player-content { padding:28px 25px 40px; } }
@media(max-width:650px) { .player-overlay { padding:0; } .player-web { min-height:100vh; border-radius:0; border:0; } .player-web-header { padding:0 18px; } .player-web-header .brand { font-size:11.5px; } .player-web-body { display:block; } .player-side { border-right:0; border-bottom:1px solid var(--line); padding:20px; display:grid; grid-template-columns:50px 1fr; column-gap:12px; align-items:center; } .player-side h2 { font-size:24px; margin:0; } .player-side p { grid-column:2; } .player-side nav { grid-column:1/-1; display:flex; margin-top:18px; } .player-side nav .phone-tab { flex:1; text-align:center; } .player-content { padding:24px 16px 35px; } .player-side label { grid-column:1/-1; margin-top:16px; } .player-web-header { padding-top:12px; padding-bottom:12px; gap:12px; } .player-web .request-card { padding:20px; } .player-web .player-kicker { font-size:9px; } .player-web .phone-exit { margin-left:6px; } }
/* Profiles adapt to their column width as well as the viewport. */
.player-content .npc-profile { flex-wrap:wrap; }
.player-content .npc-facts { flex-basis:240px; }

/* Each player tab uses the same full desktop workspace. */
.player-content { display:block; }
.player-page-heading { padding:0 0 28px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.player-page-heading h1 { font:600 35.5px var(--serif); letter-spacing:0; margin:0; overflow-wrap:anywhere; }
.player-home-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.player-home-grid p { color:var(--muted); line-height:1.7; }
.player-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.player-shortcuts button { color:var(--ink); text-align:left; cursor:pointer; font:inherit; }
.player-shortcuts button>span { color:var(--lime); font-size:27.5px; }
.player-content .people-grid,.player-content .file-grid { margin-top:24px; }
.player-content .npc-player-section { margin-top:0; }
.player-side .phone-tab { cursor:pointer; font-size:15px; }
.player-side .phone-tab:focus-visible,.player-shortcuts button:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
@media(max-width:900px) { .player-home-grid { grid-template-columns:1fr; } }
@media(max-width:650px) { .player-side nav { overflow-x:auto; width:100%; gap:6px; } .player-side nav .phone-tab { flex:0 0 auto; padding:12px; } .player-shortcuts,.player-content .people-grid,.player-content .file-grid { grid-template-columns:1fr; } .player-page-heading h1 { font-size:28.5px; } }

/* Shared campaign directories use the DM workspace dimensions and palette. */
.player-web{background:var(--canvas)}
@media(min-width:651px){
 .player-web-body{grid-template-columns:218px minmax(0,1fr)}
 .player-content{padding-left:5.8vw;padding-right:5.8vw}
}
.player-content .npc-directory{width:100%;font:inherit;color:var(--ink)}
.player-content .npc-directory .section-title{margin-top:0}
.player-roll-request,.player-roll-history { margin-bottom:24px; }
.player-roll-history ul { margin:0; padding-left:18px; line-height:1.8; }
.secret-text { white-space:pre-line; }
.reveal-image { display:block; border:0; padding:0; margin:12px 0; background:none; cursor:zoom-in; }
.reveal-image img { display:block; max-width:100%; max-height:360px; border-radius:var(--radius); }
.reveal-full { display:block; max-width:100%; margin-top:14px; border-radius:var(--radius); }
/* Encounter dashboard: the character first, then attacks and spells beside the turn order. */
.player-dash{display:grid;gap:22px}
.dash-head h2{margin:2px 0 0}
.dash-head .sp-sub{margin:2px 0 0;color:var(--text-soft)}
.dash-head .encounter-conditions{margin-top:8px}
.dash-now{color:var(--gold)}
.dash-vitals{grid-template-columns:1.4fr .6fr .6fr .6fr}
.death-card{padding:20px 22px;border:1px solid var(--wound);border-radius:var(--radius);background:var(--wound-wash)}
.death-card h3{margin:0 0 12px}
.death-card .death-pips i{width:16px;height:16px}
.death-card p{margin:12px 0 0}
.death-card .primary-btn{margin-top:14px}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:start}
.dash-grid.solo{grid-template-columns:minmax(0,1fr)}
.dash-block+.dash-block{margin-top:22px}
.dash-table{width:100%;border-collapse:collapse}
.dash-table th{font:700 13px var(--font-label);letter-spacing:.08em;text-transform:lowercase;color:var(--text-soft);text-align:left;padding:6px 8px 6px 0;border-bottom:1px solid var(--rule-strong)}
.dash-table td{padding:7px 8px 7px 0;border-bottom:1px solid var(--rule)}
.dash-spell-level{padding:8px 0;border-bottom:1px solid var(--rule)}
.dash-spell-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dash-spell-head .label{margin:0}
.dash-spell-head small{color:var(--text-soft)}
.dash-spell-level ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.dash-spell-level li small{color:var(--text-soft);margin-left:6px}
@media(max-width:1100px){.dash-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.dash-vitals{grid-template-columns:1fr 1fr}.dash-vitals>div:nth-child(3){border-left:0;padding-left:0}.dash-vitals>div:nth-child(n+3){border-top:1px solid var(--rule)}}
.table-roll { display:flex; flex-wrap:wrap; align-items:flex-end; gap:9px; margin-top:14px; }
.table-roll label { display:grid; gap:5px; font-size:14px; color:var(--text-soft); }
.table-roll input { width:110px; }