/* Calm Games · the after-round card (engine/card-view.js) and the saved-post player (library-view.js mountMedia).
   ITEM card: quote → story → stakes → ask → options, reply box, thread, Done / Not again / Later.
   MEDIA card: full screen by default (.cg-media.is-full), or inside the card (.cg-media.is-card, Settings → Media).
   Motion: enter = opacity + small rise (--t-enter), exit = opacity (--t-exit), transform/opacity only. */

/* ── media frame (shared with the shelf: same rules as dist/style.css, motion tokens from shell.css) ── */
.mframe{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:grid;place-items:center;container-type:size;-webkit-user-select:none;user-select:none}
.mframe-fit{position:relative;width:min(100cqw,calc(100cqh * var(--ar)));aspect-ratio:var(--ar);border-radius:4px;overflow:hidden;background:#151c1a;touch-action:pan-y}
.mframe-fit.no-ar{width:100%;height:100%;aspect-ratio:auto;background:transparent}
.mframe-slide{position:absolute;inset:0}
.mframe .mframe-slide img,.mframe .mframe-slide video{width:100%;height:100%;max-height:none;display:block;object-fit:contain}
.mframe-missing{display:grid;place-items:center;height:100%;color:#9aa8a1;font-size:12px}
.mframe :is(.mframe-credit,.mframe-actions,.mframe-controls,.mframe-step){position:absolute;z-index:2;opacity:0;pointer-events:none;transition:opacity 160ms var(--e-out)}
.mframe.reveal :is(.mframe-credit,.mframe-actions,.mframe-controls,.mframe-step),.mframe:has(:focus-visible) :is(.mframe-credit,.mframe-actions,.mframe-controls,.mframe-step),.mframe.paused .mframe-controls{opacity:1;pointer-events:auto}
@media(hover:hover){.mframe:hover :is(.mframe-credit,.mframe-actions,.mframe-controls,.mframe-step){opacity:1;pointer-events:auto}}
.mframe-credit{left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 96px);padding:5px 8px;border-radius:4px;background:#141c19c7;color:#f4f7f2;font-size:12px;line-height:1.2;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
a.mframe-credit:hover{background:#26332eeb}
.mframe-credit svg{width:12px;height:12px}
.mframe-actions{right:8px;top:8px;display:flex;gap:4px}
.mframe-controls{right:8px;bottom:8px;display:flex;gap:4px}
.mframe-count{position:absolute;z-index:2;left:50%;bottom:10px;transform:translateX(-50%);padding:2px 8px;border-radius:9px;background:#141c19b8;color:#f4f7f2;font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;pointer-events:none}
.mframe-btn,.mframe-step{width:34px;height:34px;min-height:34px;padding:0;border:1px solid #ffffff2b;border-radius:4px;background:#141c19c7;color:#f4f7f2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mframe-btn:hover,.mframe-step:hover{background:#26332eeb;border-color:#ffffff5c}
/* the icons are bare paths drawn as lines (the shelf's global svg rule, which these pages don't load) */
.mframe svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mframe-btn svg,.mframe-step svg{width:17px;height:17px}
.mframe-btn.pick[aria-pressed=true]{background:#f3f5f1;color:#b4433f;border-color:#f3f5f1}
.mframe-btn.pick[aria-pressed=true] svg{fill:currentColor}
.mframe-step{top:50%;transform:translateY(-50%)}
.mframe-step.prev{left:8px}
.mframe-step.next{right:8px}
.mframe-step:active:not(:disabled){transform:translateY(-50%) scale(.96)}
.mframe .mframe-step:disabled{opacity:0;pointer-events:none}
@media(max-width:580px){.mframe-btn,.mframe-step{width:38px;height:38px;min-height:38px}.mframe-credit{padding:6px 9px}}
/* A failed image/video keeps its place and offers an explicit retry. */
.mframe-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;color:#eef2ee;background:#0f1413;text-align:center}
.mframe-error p{margin:0;font-size:13px}
.mframe-error button{min-height:44px;padding:8px 14px;background:transparent;border:1px solid #a9b6b0;border-radius:4px;color:#eef2ee;font:inherit;cursor:pointer} /* game pages have no global button reset: without it the browser paints a light face under light text */
.mframe-error button:hover{background:#26332e}
.mframe-error button:focus-visible{outline:2px solid #eef2ee;outline-offset:3px}
/* sample feed on a loopback host: the bytes stay in the private store, so a quiet poster stands in */
.mframe-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa8a1; font: 12px/1.3 var(--mono);
  background: repeating-linear-gradient(135deg, #151c1a 0 14px, #18201d 14px 28px); }
.mframe-placeholder span { padding: 4px 8px; border: 1px solid #ffffff1f; border-radius: 3px; background: #0f1413cc; }

/* ── shared exit: overlay and full-screen layer fade out faster than they came in ── */
/* the card's column is the overlay's width, not the card's own: `max-width: 100%` then holds on a phone */
.overlay.card-ov { grid-template-columns: minmax(0, 1fr); }
/* one line after sign-in, over every page */
.toast.page-toast { position: fixed; width: max-content; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 80; max-width: calc(100vw - 32px); text-align: center; }
/* a phone or touch screen keeps its controls at the bottom (pad, Undo, Enter): there the line sits just under the bar (60–64 px) */
@media (max-width: 640px), (pointer: coarse) { .toast.page-toast { top: calc(68px + env(safe-area-inset-top)); bottom: auto; } }
.overlay.card-ov.out, .cg-media.is-full.out { opacity: 0; transition: opacity var(--t-exit) var(--e-out); }
.overlay.card-ov.out .card { transform: translateY(4px) scale(.985); transition: transform var(--t-exit) var(--e-out); }
html.media-open { overflow: hidden; }

/* ── ITEM card ── */
.card.is-item { padding: 18px 20px 14px; }
.card .c-src { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.card .c-src .chip { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--g-ink-2);
  border-radius: 2px; transition: color var(--t-hover) var(--e-out); }
.card .c-src a.chip { color: var(--g-accent); }
.card .c-date { flex: none; font-size: 12px; color: var(--g-ink-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .card .c-src a.chip:hover { color: var(--g-ink); } }
.card blockquote.quote { margin: 8px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--g-accent); font: italic 16.5px/1.5 var(--serif);
  color: var(--g-ink); white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; max-height: 14lh; overflow: auto; }
.card .story { margin-top: 12px; white-space: pre-line; }
.card .opt { transition: border-color var(--t-hover) var(--e-out), background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.card .opt:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .card .opt:not(.on):hover { border-color: color-mix(in srgb, var(--g-ink) 30%, transparent); background: var(--surface-2); }
  .card .opt.on:hover { background: color-mix(in srgb, var(--g-accent) 14%, transparent); } }

.card .say { display: flex; align-items: flex-end; gap: 6px; margin-top: 12px; }
.card .say .comment { margin: 0; flex: 1; min-width: 0; min-height: 40px; max-height: 32vh; resize: none; field-sizing: content; line-height: 1.4;
  border-color: var(--hair); transition: border-color var(--t-hover) var(--e-out); }
.card .say .send { flex: none; animation: cg-pop var(--t-enter) var(--e-out); }

.card .thread { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.card .thread[hidden] { display: none; }
.card .thread li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 6px 10px 7px; border-radius: var(--r-btn);
  border-left: 2px solid var(--hair); animation: cg-rise var(--t-enter) var(--e-out) both; scroll-margin-bottom: 76px; }
.card .thread li.t-petr { background: var(--surface-2); border-left-color: var(--g-accent); }
.card .thread li.old { display: none; }
.card .thread li.seen, .card.is-item > .thread.repaint { animation: none; }
.card .thread .t-meta { grid-column: 1; font-size: 11.5px; color: var(--g-ink-2); }
.card .thread .t-text { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.card .thread .t-state { grid-column: 2; grid-row: 1; font-size: 11.5px; color: var(--g-ink-2); white-space: nowrap; }
.card .thread .s-sending { animation: cg-breathe 1.2s ease-in-out infinite; }
.card .thread .s-routed { color: var(--g-ink); font-weight: 600; }
.card .thread .s-failed { color: var(--g-accent); }
.card .thread li.failed { cursor: pointer; border-left-color: var(--g-accent); }
.card .thread .t-more { display: block; padding: 0; border: 0; background: none; animation: none; }
.card .thread .t-toggle { padding: 2px 4px; margin-left: -4px; border: 0; border-radius: 2px; background: none; color: var(--g-ink-2); font: 12px/1.4 inherit; cursor: pointer;
  transition: color var(--t-hover) var(--e-out), background-color var(--t-hover) var(--e-out); }
@media (hover: hover) and (pointer: fine) {
  .card .thread .t-toggle:hover { color: var(--g-ink); background: var(--surface-2); }
  .card .thread li.failed:hover { background: color-mix(in srgb, var(--g-accent) 8%, transparent); }
}
@keyframes cg-breathe { 50% { opacity: .45; } }

.card.is-item { padding-bottom: 0; }
/* the three answers stay in reach however long the thread gets */
.card .row.acts { position: sticky; bottom: 0; z-index: 2; gap: 4px; margin-top: 4px; padding: 10px 0 14px; background: var(--g-panel); }
.card .row.acts::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(to top, var(--g-panel), color-mix(in srgb, var(--g-panel) 0%, transparent)); }
.card .row.acts .btn.primary { min-width: 84px; }
.card .row.acts .keys { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--hair); border-radius: 50%; font-size: 12px; cursor: help;
  transition: color var(--t-hover) var(--e-out), border-color var(--t-hover) var(--e-out); }
@media (hover: hover) and (pointer: fine) { .card .row.acts .keys:hover { color: var(--g-ink); border-color: var(--g-ink-2); } }
.card .btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ── MEDIA: the bar under the picture (both modes) ── */
.cg-media .m-bar { display: flex; align-items: center; gap: 4px; min-width: 0; font: var(--chrome); }
.cg-media .m-credit { flex: 1 1 auto; min-width: 0; margin-right: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-ink-2); text-decoration: none;
  border-radius: 2px; transition: color var(--t-hover) var(--e-out); }
.cg-media .m-status { flex: none; font-size: 12px; color: var(--g-ink-2); }
.cg-media .m-status:empty { display: none; }
.cg-media .m-pick[aria-pressed="true"] { color: var(--g-accent); }
.cg-media .m-pick[aria-pressed="true"] svg path { fill: currentColor; }
.cg-media .m-pick svg { transition: transform var(--t-press) var(--e-out); }
.cg-media .m-pick[aria-pressed="true"] svg { animation: cg-thump 260ms var(--e-out); }
@keyframes cg-thump { 40% { transform: scale(1.25); } }
@media (hover: hover) and (pointer: fine) { .cg-media a.m-credit:hover { color: var(--g-ink); } }

.cg-media .m-stage { position: relative; min-height: 0; }
.cg-media .m-host { position: absolute; inset: 0; }
.cg-media .m-sound { position: absolute; z-index: 3; left: 50%; bottom: 52px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 12px 6px 10px; border: 1px solid #ffffff2b; border-radius: var(--r-btn); background: #141c19d9; color: #f4f7f2; font: var(--chrome); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cg-rise var(--t-enter) var(--e-out) 400ms both;
  transition: background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.cg-media .m-sound[hidden] { display: none; }
.cg-media .m-sound svg, .cg-media .m-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cg-media .m-sound:active, .cg-media .m-close:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .cg-media .m-sound:hover { background: #26332eeb; } }

/* full screen (default): a dark layer over everything, the picture as large as it fits, the bar below it */
.cg-media.is-full { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: #0b0f0e; color: #eef2ee; animation: cg-media-in var(--t-enter) var(--e-out);
  --g-panel: #0b0f0e; --g-ink: #eef2ee; --g-ink-2: #a9b6b0; --hair: #ffffff29; --surface-2: #ffffff14; }
@keyframes cg-media-in { from { opacity: 0; } }
.cg-media.is-full .m-stage { margin: max(12px, env(safe-area-inset-top)) 12px 0; animation: cg-media-rise var(--t-view) var(--e-arrive); }
@keyframes cg-media-rise { from { opacity: 0; transform: scale(.98); } }
.cg-media.is-full .m-bar { width: min(100% - 24px, 720px); justify-self: center; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); }
.cg-media.is-full .btn { background: transparent; border-color: var(--hair); color: var(--g-ink); box-shadow: none; text-shadow: none; }
.cg-media.is-full .btn.quiet { border-color: transparent; color: var(--g-ink-2); }
.cg-media.is-full .btn.primary { background: #eef2ee; border-color: #eef2ee; color: #0b0f0e; }
.cg-media.is-full .m-pick[aria-pressed="true"] { color: #ff7b72; }
@media (hover: hover) and (pointer: fine) {
  .cg-media.is-full .btn:hover { background: var(--surface-2); color: var(--g-ink); }
  .cg-media.is-full .btn.primary:hover { background: #fff; border-color: #fff; color: #0b0f0e; }
}
.cg-media .m-close { position: absolute; z-index: 4; top: max(12px, env(safe-area-inset-top)); right: 12px; display: grid; place-items: center; width: 38px; height: 38px;
  padding: 0; border: 1px solid #ffffff2b; border-radius: var(--r-btn); background: #141c19c7; color: #f4f7f2; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
@media (hover: hover) and (pointer: fine) { .cg-media .m-close:hover { background: #26332eeb; } }
@media (max-width: 640px) {
  .cg-media.is-full .m-stage { margin: calc(max(12px, env(safe-area-inset-top)) + 46px) 0 0; }
  .cg-media.is-full .mframe-fit { border-radius: 0; }
  .cg-media.is-full .m-bar { width: calc(100% - 24px); }
}

/* in card (Settings → Media): the same player inside the after-round card */
.card.cg-media.is-card { width: clamp(340px, calc(min(62vh, 620px) * var(--m-ar, .8)), 760px); max-width: 100%; padding: 0; display: grid; grid-template-rows: auto auto; overflow: hidden; }
.card.cg-media.is-card .m-stage { aspect-ratio: var(--m-ar, .8); max-height: min(62vh, 620px); background: #0f1413; }
.card.cg-media.is-card .mframe-fit { border-radius: 0; }
.card.cg-media.is-card .m-bar { padding: 10px 12px; }
@media (max-width: 760px) { .card.cg-media.is-card .m-stage { max-height: 58dvh; } }

@media (prefers-reduced-motion: reduce) {
  .cg-media.is-full, .cg-media.is-full .m-stage, .cg-media .m-sound, .card .thread li, .card .say .send, .cg-media .m-pick[aria-pressed="true"] svg { animation: none; }
  .card .thread .s-sending { animation: none; }
}

/* ── GOOD FEED (engine/good.js): the same dark layer, for everyone. A quote set large; a video or a post in the platform's own player ── */
.cg-good .m-stage { display: grid; place-items: center; }
.cg-good .g-local { width: 100%; height: 100%; min-height: 0; }
.cg-good .g-local .mframe-count,.cg-good .g-local .mframe-step { opacity: 1; pointer-events: auto; }
.cg-good .g-local .mframe-step:disabled { opacity: .25; }
.cg-good .g-quote { margin: 0; width: min(100%, 34em); padding: 0 8px; text-align: left; animation: cg-rise var(--t-view) var(--e-arrive) both; }
.cg-good .g-quote blockquote { margin: 0; font: italic clamp(19px, 2.6vw, 27px)/1.5 var(--serif); color: #eef2ee; text-wrap: pretty; overflow-wrap: break-word;
  max-height: 64dvh; overflow: auto; }
.cg-good .g-quote figcaption { margin-top: 18px; font: var(--chrome); color: #a9b6b0; }
.cg-good .g-quote figcaption span { font-variant-numeric: tabular-nums; }
.cg-good .g-frame { position: relative; overflow: hidden; border-radius: 4px; background: #151c1a; }
.cg-good .g-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cg-good .g-frame.is-video { width: min(100%, calc((100dvh - 120px) * 16 / 9), 1100px); aspect-ratio: 16 / 9; }
/* Instagram's embed is a white card of its own: header, picture, a footer; it scrolls inside when it is taller than the space.
   Dark with a quiet «Loading…» until the card has loaded, then the white card fades in */
.cg-good .g-frame.is-ig { width: min(100%, 460px); height: min(100%, 640px); background: #151c1a; transition: height var(--t-view) var(--e-out), background-color var(--t-view) var(--e-out); }
.cg-good .g-frame.is-ig iframe { opacity: 0; transition: opacity var(--t-view) var(--e-out); }
.cg-good .g-frame.is-ig.is-ready { background: #fff; }
.cg-good .g-frame.is-ig.is-ready iframe { opacity: 1; }
.cg-good .g-wait { position: absolute; inset: 0; display: grid; place-items: center; font: var(--chrome); color: #7f8c86; animation: cg-wait 1.6s ease-in-out infinite alternate; }
.cg-good .g-frame.is-ready .g-wait { display: none; }
@keyframes cg-wait { from { opacity: .35; } to { opacity: .9; } }
.cg-good .m-bar .btn { white-space: nowrap; }
.cg-good .m-bar { flex-wrap: wrap; }
.cg-good .g-recovery { flex-basis: 100%; order: -1; margin: 0 0 8px; color: #a9b6b0; font: var(--chrome); line-height: 1.5; }
.cg-good .g-recovery[hidden] { display: none; }
.cg-good .g-recovery a { color: #eef2ee; text-underline-offset: 3px; }
.cg-good.g-a .m-credit, .cg-good.g-s .m-credit, .cg-good.g-y .m-credit { color: #a9b6b0; }
@media (max-width: 640px) {
  .cg-good.is-full .m-stage { margin-left: 12px; margin-right: 12px; }
  .cg-good .g-frame.is-ig { width: 100%; height: 100%; border-radius: 4px; }
  .cg-good .g-quote blockquote { max-height: 58dvh; }
}
@media (prefers-reduced-motion: reduce) { .cg-good .g-quote, .cg-good .g-wait { animation: none; } .cg-good .g-frame.is-ig, .cg-good .g-frame.is-ig iframe { transition: none; } }