/* «Бухта Завтра» · bay-v3 shift debrief (debrief.js). Same visual language as style.css: cream cards (--cream #fff9e8),
   forest text (--forest #244d43), #315f4c buttons, gold stars (--gold #f6b74c), 28 px card radius, 48 px touch targets.
   The debrief lives in #end, where style.css styles every `.end button` and `.end p` (specificity 0,1,1): the rules for
   buttons and paragraphs here start with `.debrief ` so they win. The overlay leaves a strip at the top for the top bar
   and the toasts; only the card takes pointer input. Motion only without reduced motion. */
.debrief{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:88px 24px 24px;background:linear-gradient(#173f3500 12%,#173f358f);pointer-events:none;color:var(--forest,#244d43)}
.end>.debrief{background:none}
.debrief-card{position:relative;pointer-events:auto;width:min(780px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:24px 30px 22px;border:1px solid #fff;border-radius:28px;background:var(--cream,#fff9e8);box-shadow:0 18px 60px #122e3640;text-align:left}
.debrief .debrief-eyebrow{margin:0;font-size:12px;line-height:1.4;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#7f5c1d}
.debrief-title{margin:4px 0 0;font-size:26px;line-height:1.2;letter-spacing:-.6px}
.debrief-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:14px 0 0}
.debrief-stars{display:flex;gap:4px}
/* An unlit star keeps a ≥3:1 outline on the cream card; a lit one is gold. */
.debrief-star{width:42px;height:42px;fill:#f4efdc;stroke:#8a8060;stroke-width:1.2;stroke-linejoin:round}
.debrief-star.on{fill:var(--gold,#f6b74c);stroke:#b6761c}
.debrief-criteria{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:14px;line-height:1.4}
.debrief-criteria li{display:flex;gap:8px;align-items:baseline;color:#6b725b}
.debrief-criteria li.met{color:var(--forest,#244d43);font-weight:700}
.debrief-mark{flex:0 0 42px;font-size:12px;letter-spacing:1px;color:#c9c2a3}
.debrief-criteria li.met .debrief-mark{color:#c98a22}
.debrief .debrief-result{margin:10px 0 0;font-size:14px;line-height:1.5;color:#55604b}
.debrief-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;margin-top:16px}
.debrief-panel{border-radius:20px;background:#eef1e3;padding:14px 16px}
.debrief h3{margin:0 0 8px;font-size:15px;letter-spacing:-.2px}
.debrief-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.debrief-trust-value{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1}
.debrief-spark{display:block;width:100%;height:auto;margin:6px 0 8px;overflow:visible}
.debrief-area{fill:#4b876d26}
.debrief-line{fill:none;stroke:#315f4c;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.debrief-threshold{stroke:#b6761c;stroke-width:1;stroke-dasharray:3 4;opacity:.75}
.debrief-threshold-label{font-size:10px;font-weight:800;fill:#7f5c1d}
.debrief-dot{fill:#315f4c;stroke:var(--cream,#fff9e8);stroke-width:2}
.debrief .debrief-causes{margin:0;font-size:12.5px;line-height:1.5;color:#55604b}
.debrief-facts{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px;line-height:1.5}
.debrief-facts li{position:relative;padding-left:15px}
.debrief-facts li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#d0a24e}
.debrief .debrief-team-heading{margin-top:14px}
.debrief-team{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13px;line-height:1.4}
.debrief-team li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:3px 10px;align-items:center}
.debrief-team strong{font-size:14px}
.debrief-bar{height:7px;border-radius:5px;background:#cbd7bf;overflow:hidden}
.debrief-bar i{display:block;height:100%;max-width:100%;background:#4b876d;border-radius:inherit;transform-origin:left center}
.debrief-team-text{grid-column:2;color:#55604b}
.debrief-parallel{margin:16px 0 0;padding:14px 18px;border-radius:18px;background:#fbefd2;border-left:5px solid var(--gold,#f6b74c)}
.debrief-parallel-label{display:block;margin-bottom:4px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#7f5c1d}
.debrief .debrief-parallel p{margin:0;font-size:16px;line-height:1.55;font-weight:650}
.debrief .debrief-scope{margin:10px 0 0;font-size:13px;line-height:1.5;color:#55604b}
.debrief-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px}
.debrief .debrief-btn{min-height:48px;padding:12px 18px;border:1px solid #315f4c;border-radius:15px;background:var(--cream,#fff9e8);color:#315f4c;font-size:16px;font-weight:750}
.debrief .debrief-btn.primary{background:#315f4c;color:var(--cream,#fff9e8)}
/* While the host restarts the shift or opens the next one: the buttons wait, focus stays on them. */
.debrief .debrief-btn[aria-disabled=true]{opacity:.6;cursor:progress}
.debrief .debrief-article{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:6px 4px;color:#315f4c;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.debrief .debrief-article:focus-visible{outline:3px solid #285cdb;outline-offset:4px;border-radius:6px}
.debrief-arrow{text-decoration:none}
.debrief-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:no-preference){
.debrief{transition:padding-top .3s ease-out}
.debrief-card{animation:debrief-in .35s ease-out}
.debrief-star.on{animation:debrief-pop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,1) * .22s + .15s)}
.debrief-line{stroke-dasharray:1;animation:debrief-draw 1.3s .35s ease-out both}
.debrief-bar i{animation:debrief-grow .8s .3s ease-out both}
}
@keyframes debrief-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes debrief-pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@keyframes debrief-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes debrief-grow{from{transform:scaleX(0)}to{transform:none}}
.debrief-star{transform-box:fill-box;transform-origin:center}
/* Mouse and trackpad: the same compact controls as style.css; touch screens keep 48 px targets. */
@media(pointer:fine){.debrief .debrief-btn{min-height:42px;padding:9px 15px;font-size:14px}.debrief .debrief-article{min-height:42px}}
/* Phones: a bottom sheet over the bay, like the selection card; panels stack. */
@media(max-width:700px){
.debrief{align-items:flex-end;padding:72px 0 0}
.debrief-card{width:100%;border-width:1px 0 0;border-radius:22px 22px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom))}
.debrief-title{font-size:21px}.debrief-star{width:34px;height:34px}.debrief-grid{grid-template-columns:1fr}
.debrief-parallel{padding:12px 14px}.debrief .debrief-parallel p{font-size:15px}
.debrief-actions{flex-direction:column;align-items:stretch}.debrief .debrief-btn{width:100%}
}
/* Short landscape screens: the top bar (pause, story) stays clear above the card, which scrolls. */
@media(max-height:480px){.debrief{padding:max(64px,env(safe-area-inset-top)) 16px 12px}.debrief-card{padding:16px 18px}.debrief-title{font-size:20px}}
/* The run check / save banner of client.js (.connection-status, z-index 25, top 96px) is shown from the end of the shift
   until the run is verified: the card moves below it instead of hiding its title and stars. */
#game:has(.connection-status:not([hidden])) .debrief{padding-top:236px}
@media(max-height:480px){#game:has(.connection-status:not([hidden])) .debrief{padding-top:212px}}
/* Toasts after the shift («Смены 2–6 — по приглашению…») show above the debrief, in the strip it leaves at the top. */
#game:has(.debrief .debrief-card) .toast{z-index:11;top:max(16px,env(safe-area-inset-top));bottom:auto}