/* Terminal State · Play, the campaign page. The look is the Play engine's kit (assets/css/play/kit.css): kit tokens and their
   meanings (magenta = an action, cyan = info / you, green = healing / success, amber = attention / money, red = danger,
   muted = not yours), k-panel surfaces, k-card choices, k-btn roles. Phone first, no horizontal scroll. */
.tp-body { background: var(--k-bg); }
.tp { max-width: 1100px; margin: 0 auto; padding: 12px 16px 48px; box-sizing: border-box; color: var(--k-text); font-family: var(--k-ui); }
.tp *, .tp *::before, .tp *::after { box-sizing: border-box; }
.tp-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tp-back { color: var(--k-cyan); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; }
.tp-kicker, .tp .k-kicker { font: 700 11px/1.3 var(--k-mono); letter-spacing: .14em; color: var(--k-cyan); text-transform: uppercase; }
.tp-muted { color: var(--k-muted); }
.tp-small { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
.tp-warn { color: var(--k-yel); }
.tp h1 { margin: 6px 0; font-size: 26px; }
.tp h2 { margin: 6px 0; font-size: 20px; }
.tp h3 { margin: 18px 0 8px; font-size: 16px; color: var(--k-text); }
.tp h4 { margin: 14px 0 6px; font-size: 14px; }
.tp a:not(.k-btn) { color: var(--k-cyan); }
.tp .k-btn { text-decoration: none; }
/* the retro pixel look (T-131): only the game's own pixel art renders pixelated; a player's uploaded avatar is shown as it is (Overlord) */
.tp img.px { image-rendering: pixelated; }
/* no blur over the pictures: the kit's glass panels go flat (the dark fill does the dimming) */
.tp .k-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* music (T-132): the ♪ button in the bar */
.tp-music { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 11px var(--k-mono); }
.tp-app.busy { opacity: .6; pointer-events: none; } /* a request is running: taps are ignored, so show it (T-120 #19) */

.tp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tp-card { background: var(--k-panel); border: 1px solid var(--k-line-soft); border-radius: var(--k-r); padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-card.k-panel { border-color: var(--k-line); }
.tp-card b { font-size: 16px; }
.tp-card small { color: var(--k-muted); }
.tp-card p { margin: 0; font-size: 14px; }
.tp-face { width: 100%; max-height: 220px; object-fit: cover; object-position: top; border-radius: var(--k-r-s); background: var(--k-field); }
.tp-face.sm { width: 44px; height: 44px; border-radius: 50%; }
.tp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

/* the status strip: every stat is a button that opens its book one-liner (T-120 idea C) */
.tp-strip { position: relative; z-index: 5; display: grid; gap: 8px; } /* its one-liner pops over the panels below */
.tp-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-who small { display: block; color: var(--k-muted); font-size: 12px; }
.tp-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tp-stat { display: flex; flex-direction: column; align-items: flex-start; min-width: 54px; padding: 2px 4px; margin: -2px -4px; border: 1px solid transparent; border-radius: var(--k-r-s); background: none; color: var(--k-text); font: inherit; text-align: left; cursor: pointer; }
.tp-stat:hover, .tp-stat.on { border-color: var(--k-line); }
.tp-stat em { font: normal 11px/1.2 var(--k-mono); color: var(--k-muted); text-transform: uppercase; letter-spacing: .06em; }
.tp-stat b { font-size: 16px; }
.tp-stat small { font-size: 11px; color: var(--k-muted); }
.tp-stat.warm b { color: var(--k-yel); } /* a meter at 3–5 steps your dice down */
.tp-stat.hot b { color: var(--k-red); }  /* 6+: Lockdown */
.tp-stat.edge b, .tp-stat.edge em { color: var(--k-muted); } /* the Referee's pool, not yours (T-120 #6) */
.tp-pips { display: inline-flex; gap: 3px; margin-top: 3px; }
.tp-pips i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--k-line); background: transparent; }
.tp-pips.h i.on { background: var(--k-grn); border-color: var(--k-grn); }
.tp-pips.r i.on { background: var(--k-cyan); border-color: var(--k-cyan); }
.tp-pop { position: absolute; left: 8px; right: 8px; top: calc(100% - 6px); z-index: 30; max-width: 420px; padding-right: 44px; background: var(--k-panel-hi); border-color: var(--k-yel); box-shadow: 0 12px 30px var(--k-shade); font-size: 13px; line-height: 1.45; }
.tp-pop p { margin: 4px 0 0; }
.tp-pop .k-x { top: 6px; right: 6px; }
.tp-meter { margin: 6px 2px 0; font: 12px var(--k-mono); color: var(--k-muted); }
.tp-meter.warm { color: var(--k-yel); }
.tp-meter.hot { color: var(--k-red); }
.ps .tp-x { position: absolute; top: 12px; left: 12px; z-index: 7; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--k-line); background: color-mix(in srgb, var(--k-black) 78%, transparent); color: var(--k-text); font: 700 18px/1 var(--k-mono); cursor: pointer; }
.ps .tp-x:hover { border-color: var(--k-red); color: var(--k-red); }
.ps .tp-x[hidden] { display: none; }
.tp-notes { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--k-muted); }
.tp-notes li::before { content: "· "; color: var(--k-cyan); }
.ps.has-x .ps-chip { left: 64px; }
/* the state box under the chip: what you must know about yourself, in words */
/* the column under the chip: who lives with you, then the state box */
.ps .tp-side { position: absolute; top: 68px; left: 12px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: calc(100% - 24px); }
.ps.has-x .tp-side { left: 64px; }
.ps.talking .tp-house { display: none; } /* their portrait takes the spot while you talk */
.ps .tp-state { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: min(300px, calc(100% - 24px)); padding: 8px 12px; border: 1px solid var(--k-line); border-radius: 14px; background: color-mix(in srgb, var(--k-black) 82%, transparent); color: var(--k-text); font: inherit; text-align: left; cursor: pointer; }
.ps .tp-state[hidden] { display: none; }
/* who lives with you (people.php): a pill each, shaped and sized like the chip (stage.css .ps-chip); ringed when home */
.ps .tp-house { display: flex; flex-direction: column; gap: 8px; }
.ps .tp-house[hidden] { display: none; }
.ps .tp-mate { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; max-width: 100%; padding: 5px 14px 5px 5px; border: 1px solid var(--k-line); border-radius: var(--k-pill); background: color-mix(in srgb, var(--k-black) 78%, transparent); color: var(--k-text); font: inherit; text-align: left; cursor: pointer; }
.ps .tp-mate img { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid var(--k-line); }
.ps .tp-mate.home img { border: 2px solid #ff6fa8; box-shadow: 0 0 8px color-mix(in srgb, #ff6fa8 50%, transparent); }
.ps .tp-mate span { display: flex; flex-direction: column; min-width: 0; }
.ps .tp-mate b, .ps .tp-mate small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ps .tp-mate b { font-size: 14px; }
.ps .tp-mate small { font-size: 11px; color: var(--k-muted); }
@media (max-width: 700px) { .ps .tp-mate img { width: 36px; height: 36px; } }
.ps .tp-state.warm { border-color: color-mix(in srgb, var(--k-yel) 60%, transparent); }
.ps .tp-state.hot { border-color: var(--k-red); box-shadow: 0 0 16px color-mix(in srgb, var(--k-red) 35%, transparent); }
.ps .tp-state span { display: flex; flex-direction: column; gap: 1px; }
.ps .tp-state b { font-size: 14px; }
.ps .tp-state .warm b { color: var(--k-yel); }
.ps .tp-state .hot b { color: var(--k-red); }
.ps .tp-state.good { border-color: color-mix(in srgb, var(--k-grn) 60%, transparent); }
.ps .tp-state .good b { color: var(--k-grn); }
.ps .tp-state small { font-size: 12px; line-height: 1.3; color: var(--k-muted); }
.ps .tp-state em { font-style: normal; font-size: 11px; color: var(--k-muted); }
/* the hour: a little sky peeking out of the chip's rounded end (ui.js hourHtml); a picture when there is one */
.ps-chip { position: absolute; overflow: visible; }
.tp-hour { position: absolute; top: 2px; bottom: 2px; right: -70px; width: 88px; z-index: -1; border-radius: 0 999px 999px 0; overflow: hidden; border: 1px solid var(--k-line); background: var(--hour-pic, none) center / cover, var(--sky); }
.tp-hour i { position: absolute; width: 14px; height: 14px; border-radius: 50%; right: 18px; top: 6px; background: var(--orb); box-shadow: 0 0 10px var(--orb); }
.tp-hour::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(90deg, #0b0a12 0 8%, transparent 8% 12%, #0b0a12 12% 26%, transparent 26% 30%, #0b0a12 30% 44%, transparent 44% 47%, #0b0a12 47% 63%, transparent 63% 66%, #0b0a12 66% 84%, transparent 84% 88%, #0b0a12 88%); clip-path: polygon(0 40%, 8% 40%, 8% 0, 12% 0, 12% 55%, 26% 55%, 26% 20%, 30% 20%, 30% 45%, 44% 45%, 44% 10%, 47% 10%, 47% 50%, 63% 50%, 63% 25%, 66% 25%, 66% 35%, 84% 35%, 84% 5%, 88% 5%, 88% 60%, 100% 60%, 100% 100%, 0 100%); } /* a skyline */
.tp-hour em { position: absolute; right: 8px; bottom: 3px; font: 700 9px/1 var(--k-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000; z-index: 1; }
.tp-hour.h-morning { --sky: linear-gradient(180deg, #4b5a8a, #e8a07a 70%, #f5c98e); --orb: #ffd6a0; }
.tp-hour.h-day { --sky: linear-gradient(180deg, #8f8a78, #c4b48e); --orb: #fff1c4; }
.tp-hour.h-evening { --sky: linear-gradient(180deg, #3d2a5c, #c4506a 65%, #f08a4a); --orb: #ff9a5a; }
.tp-hour.h-night { --sky: linear-gradient(180deg, #07061a, #241a46); --orb: #dfe6ff; animation: tp-hour-pulse 2.4s ease-in-out infinite; }
.tp-hour.h-night i { width: 11px; height: 11px; background: radial-gradient(circle at 35% 40%, transparent 4px, #dfe6ff 5px); box-shadow: none; }
@keyframes tp-hour-pulse { 50% { box-shadow: 0 0 12px rgba(160, 140, 255, 0.7); } }
html[data-motion="off"] .tp-hour.h-night { animation: none; }
/* a shop's keeper: face, name, a line */
.tp-keeper { display: flex; gap: 12px; align-items: center; margin: 10px 0 14px; padding: 10px; border: 1px solid var(--k-line); border-radius: var(--k-r); background: color-mix(in srgb, var(--k-black) 50%, transparent); }
.tp-keeper img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; image-rendering: pixelated; flex: none; }
.tp-keeper b { display: block; font-size: 16px; }
.tp-keeper small { color: var(--k-muted); }
.tp-keeper p { margin: 6px 0 0; font-style: italic; }
.tp-coach { margin: 8px 2px 0; color: var(--k-yel); font-size: 14px; } /* "Next to do" (T-120 idea B) */
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { font-size: 12px; padding: 2px 8px; border-radius: var(--k-pill); border: 1px solid var(--k-line); color: var(--k-muted); }
.tp-chip.bad { border-color: var(--k-yel); color: var(--k-yel); }
.tp-chip.crit { border-color: var(--k-red); color: var(--k-red); }
.tp-chip.broken { background: var(--k-red); color: var(--k-ink); border-color: var(--k-red); font-weight: 700; }
.tp-chip.good { border-color: var(--k-grn); color: var(--k-grn); }
.tp-chip.info { border-color: var(--k-cyan); color: var(--k-cyan); }
.tp-chip.turn { border-color: var(--k-yel); color: var(--k-yel); }


/* scenes and home */
.tp-feed { border-left: 3px solid var(--k-cyan); padding-left: 10px; margin: 10px 0; }
.tp-feed p { margin: 4px 0; color: var(--k-muted); font-size: 14px; }
.tp-feed p.last { color: var(--k-text); }
.tp-why { display: block; font-size: 12px; color: var(--k-yel); }
.tp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.tp-tag { font: 11px/1.4 var(--k-mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--k-line); color: var(--k-muted); }
.tp-tag.dice { color: var(--k-cyan); border-color: color-mix(in srgb, var(--k-cyan) 45%, transparent); }
.tp-tag.vs { color: var(--k-red); border-color: color-mix(in srgb, var(--k-red) 45%, transparent); }
.tp-tag.ok { color: var(--k-grn); border-color: color-mix(in srgb, var(--k-grn) 45%, transparent); }
.tp-tag.cost { color: var(--k-yel); border-color: color-mix(in srgb, var(--k-yel) 45%, transparent); }

/* a card's read panel: the dice you'll throw */
.tp-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; }
/* a saved life: the small round face in a row with its name (T-126 N10) */
.tp-card.life { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.tp-card.life small { flex: 1 1 auto; }
.tp-card.life .tp-acts { flex: 1 0 100%; }

/* hacking */
.tp-hack { margin-top: 12px; display: grid; gap: 10px; }
.tp-hack-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tp-hack-head b { font-size: 17px; }

/* market and journal */
.tp-card.shop.owned { opacity: .7; }
.tp-how { max-width: 100%; background: var(--k-field); color: var(--k-text); border: 1px solid var(--k-line); border-radius: var(--k-r-s); padding: 4px 6px; font: inherit; font-size: 12px; min-width: 0; flex: 1 1 140px; }
.tp-journal { padding: 14px; overflow-wrap: anywhere; }
.tp-journal ul { padding-left: 18px; }
.tp-journal li { margin: 4px 0; font-size: 14px; }
.tp-log { padding-left: 18px; font-size: 13px; color: var(--k-muted); }
.tp-log li { margin: 2px 0; }

/* dialogs */
.tp-modal { position: fixed; inset: 0; background: var(--k-dim); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 110; } /* above the sticky site header (z 100): the dim covers the nav too (T-126 N1) */
.tp-modal[hidden] { display: none; }
.tp-dialog { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px; border-radius: var(--k-r-l); background: var(--k-panel-hi); box-shadow: 0 18px 40px var(--k-shade); }
.tp-dialog.card { border-color: var(--k-pur); }
.tp-dialog .k-kicker:not(:first-child) { display: block; margin-top: 14px; }
.tp-q { list-style: none; padding: 0; }
.tp-q li { margin: 8px 0; }
.tp-hint { display: block; color: var(--k-muted); font-style: italic; margin-left: 22px; }
.tp-pick h2 { margin-top: 18px; }

@media (max-width: 600px) {
  .tp { padding: 8px 16px 40px; }
  /* one strip layout for every character (T-120 #20): five columns, two rows */
  .tp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 6px; }
  .tp-stat { min-width: 0; min-height: 44px; margin: 0; padding: 2px; }
  .tp-stat em { letter-spacing: .02em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; }
  .tp-stat small { overflow-wrap: anywhere; }
  .tp-pips i { width: 9px; height: 9px; }
  .tp-cards { grid-template-columns: 1fr; }
  .tp-face { max-height: 160px; }
  /* tap targets ≥ 44 px (T-120 #12) */
  .tp .k-btn { min-height: 44px; }
  .tp-back { min-height: 44px; padding: 0 8px; }
  .tp-bar { flex-wrap: wrap; row-gap: 4px; }
  #tp-music-label { display: none; } /* the bar is too narrow for the mood name; the ♪ button stays */
  .tp-pick p a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .tp-q input { width: 20px; height: 20px; vertical-align: -4px; }
  .tp-q label { display: inline-block; min-height: 44px; padding: 10px 0; }
  .tp-body .trmnl-lang { width: auto; flex: 0 0 auto; } /* compact, like the chargen's (T-126 N3) */
  .tp-body .trmnl-lang .lib-switch-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tp-pop .k-x { width: 44px; height: 44px; top: 2px; right: 2px; }
}

/* encounter cards are drawn with a flip */
html[data-motion="full"] .tp-dialog.card { animation: tp-flip 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html[data-motion="reduced"] .tp-dialog.card { animation: k-fade 0.25s ease-out both; }
@keyframes tp-flip { from { transform: perspective(900px) rotateY(85deg); opacity: 0; } }
/* the debrief as a scene: the room behind it, the questions as cards */
.tp-dialog.scene { background: linear-gradient(180deg, color-mix(in srgb, var(--k-black) 55%, transparent), color-mix(in srgb, var(--k-black) 88%, transparent)), var(--bg, none) center / cover no-repeat, var(--k-panel-hi); image-rendering: pixelated; }
.tp-dialog.scene h2 { font: 400 clamp(26px, 3vw + 10px, 40px)/1.2 var(--k-display); text-align: center; text-shadow: 0 2px 6px var(--k-black); }
.tp-dialog.scene > .tp-muted { text-align: center; color: var(--k-text); font-family: var(--k-display); font-size: 17px; }
.tp-dialog.scene .tp-q li { margin: 8px 0; padding: 4px 10px; border: 1px solid var(--k-line-soft); border-radius: var(--k-r); background: color-mix(in srgb, var(--k-black) 40%, transparent); }
.tp-dialog.scene .tp-q li:has(input:checked) { border-color: var(--k-grn); background: color-mix(in srgb, var(--k-grn) 12%, transparent); }
/* an encounter is a playing card: value and suit in the corners, the suit big (T-140 #5) */
.tp-enc { display: flex; gap: 14px; align-items: flex-start; }
.tp-enc + .tp-enc { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--k-line-soft); }
.tp-enc > div { min-width: 0; }
.tp-pcard { position: relative; flex: 0 0 auto; width: 84px; height: 118px; display: grid; place-items: center; border-radius: 8px; background: var(--k-text); color: var(--k-ink); box-shadow: 0 6px 16px var(--k-shade); }
.tp-pcard.red { color: var(--k-red); }
.tp-pcard span { position: absolute; top: 6px; left: 7px; font: 800 13px/1.05 var(--k-mono); text-align: center; }
.tp-pcard span + b + span { top: auto; left: auto; bottom: 6px; right: 7px; transform: rotate(180deg); }
.tp-pcard b { font-size: 44px; line-height: 1; }
@media (max-width: 600px) {
  .tp-pcard { width: 64px; height: 90px; }
  .tp-pcard b { font-size: 32px; }
}
/* a card's read panel: need N, Win / Lose */
.tp-need { font: 700 12px var(--k-mono); letter-spacing: 0.06em; color: var(--k-yel); }
.tp-stake { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin-top: 8px; font-size: 14px; }
.tp-stake b.ok { color: var(--k-grn); }
.tp-stake b.no { color: var(--k-red); }

/* ═══ the Play engine layout (Overlord #1232, specs/play_engine.md): the stage is full-bleed under a slim bar; the
   picker, the market and the journal keep the old column. Everything else (hand, caption, dice, roll, title cards,
   toasts) is the engine's: assets/css/play/*.css ═══ */
body.tp-body .tp { max-width: none; padding: 0; }
body.tp-body .tp-bar { position: relative; z-index: 7; margin: 0; padding: 4px 16px; min-height: 44px; background: var(--k-bg); border-bottom: 1px solid var(--k-line-soft); }
/* #tp-stage height: PlayStage.fit() (the space left below the header and the bar) */
#tp-stage[hidden], .tp-app[hidden] { display: none; }
body.tp-body .tp-app { max-width: 1100px; margin: 0 auto; padding: 12px 16px 48px; box-sizing: border-box; }
.ps.busy .ps-hand { opacity: 0.85; }
.ps-chip .tp-pips { display: inline-flex; gap: 3px; }
.ps-chip .tp-pips i { width: 10px; height: 10px; }
.ps-hud .tp-hudrow { display: flex; justify-content: flex-end; width: 100%; }
.ps-hud .tp-strip, .ps-hud .tp-hack { width: 100%; box-sizing: border-box; }
.ps-hud .tp-coach, .ps-hud .tp-meter, .ps-hud .tp-warn { margin: 0; padding: 4px 12px; border-radius: var(--k-pill); background: color-mix(in srgb, var(--k-black) 72%, transparent); text-align: center; }
.tp-shop > .k-btn.chip, .tp-journal > .k-btn.chip { float: right; }

/* the person you talk to (people.php): a long waist-up portrait on the left, their words beside it */
.ps .tp-person { position: absolute; left: max(12px, 3vw); bottom: 150px; top: 120px; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 2 / 3; max-width: 42%; pointer-events: none; }
.ps .tp-person[hidden] { display: none; }
.ps .tp-person img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; object-position: top; border-radius: 14px 14px 4px 4px; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); box-shadow: 0 10px 40px color-mix(in srgb, var(--k-black) 70%, transparent); animation: k-fade 0.4s ease-out both; }
.ps .tp-person-tag { margin-top: -38px; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--k-black) 80%, transparent); border: 1px solid var(--k-line); pointer-events: auto; }
.ps .tp-person-tag b { font-size: 17px; }
.ps .tp-person-tag > span:not(.tp-hearts):not(.tp-corrupt) { font-size: 12px; color: var(--k-muted); }
.ps .tp-person-tag small { font-size: 11.5px; color: var(--k-muted); line-height: 1.35; }
.ps .tp-hearts { display: flex; gap: 3px; font-size: 18px; font-style: normal; color: var(--k-muted); }
.ps .tp-hearts i { font-style: normal; }
.ps .tp-hearts.love .f { color: var(--k-heart); text-shadow: 0 0 8px color-mix(in srgb, var(--k-heart) 60%, transparent); }
.ps .tp-hearts.star .f { color: var(--k-yel); text-shadow: 0 0 8px color-mix(in srgb, var(--k-yel) 60%, transparent); }
.ps .tp-hearts.love .h { background: linear-gradient(90deg, var(--k-heart) 50%, var(--k-muted) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps .tp-hearts.star .h { background: linear-gradient(90deg, var(--k-yel) 50%, var(--k-muted) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps .tp-hearts .e { opacity: 0.45; }
.ps .tp-corrupt { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: color-mix(in srgb, var(--k-white) 12%, transparent); overflow: hidden; }
.ps .tp-corrupt i { display: block; height: 100%; background: linear-gradient(90deg, #7a2cff, #c2185b); }
/* the stages of corruption (people.php): marks at slipping (4) and corrupted (7), the stage named under the bar */
.ps .tp-corrupt { position: relative; }
.ps .tp-corrupt u { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--k-white) 55%, transparent); }
.ps .tp-person .tp-person-tag > span.tp-stage { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-muted); }
.ps .tp-person .tp-person-tag > span.tp-stage.s2 { color: #b48cff; }
.ps .tp-person .tp-person-tag > span.tp-stage.s3 { color: #ff6fa8; }
.ps .tp-person .tp-person-tag > span.tp-live { font-size: 12px; color: var(--k-yel); }
/* their heat tonight (people.php night_on): five flames, the lit ones bright */
.ps .tp-person .tp-person-tag > span.tp-heat { font-size: 15px; letter-spacing: 1px; }
.ps .tp-heat i { font-style: normal; filter: grayscale(1) brightness(.45); }
.ps .tp-heat i.on { filter: none; }
.ps .tp-night .tp-tag { display: inline-block; margin: 0 0 6px; }
.ps.talking .ps-cine { left: auto; right: max(16px, 3vw); transform: none; width: min(640px, calc(55% - 24px)); text-align: left; }
.ps.talking .ps-cine .cine-sep { margin-left: 0; }
.tp-night { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 18px; max-width: 980px; max-height: 88vh; overflow: auto; }
.tp-night img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top; border-radius: 10px; position: sticky; top: 0; }
/* the night with both: their two photos side by side, sticky together */
.tp-night-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: start; position: sticky; top: 0; }
.tp-night-pics img { position: static; }
.tp-night.three { grid-template-columns: minmax(260px, 44%) 1fr; }
.tp-night-text p { line-height: 1.55; }
.tp-you label { margin-right: 12px; white-space: nowrap; }
.tp-you select { font: inherit; }
@media (max-width: 700px) {
  .ps .tp-person { top: 70px; bottom: auto; height: 48%; max-width: 60%; left: 50%; transform: translateX(-50%); }
  .ps.talking .ps-cine { left: 50%; right: auto; transform: translateX(-50%); width: calc(100% - 32px); text-align: center; }
  .ps.talking .ps-cine .cine-sep { margin-left: auto; }
  .tp-night { grid-template-columns: 1fr; }
  .tp-night img { position: static; max-height: 50vh; }
  .tp-night.three { grid-template-columns: 1fr; }
  .tp-night-pics { position: static; }
}
.tp-lvl { align-items: center; gap: 12px; margin: 10px 0 4px; }

/* a card already played (USED) or a goal reached (DONE), and a card that can't be played now: greyed (the playtest,
   2026-10-22: "if an action is already done… put it grey with a used tag on top") */
.k-card.is-off { opacity: 0.55; filter: grayscale(0.85); }
.k-card.is-used { opacity: 0.45; }
.k-card.is-used .k-tag { background: var(--k-muted); color: var(--k-ink); }
.k-pick .k-card[disabled] { opacity: 0.45; filter: grayscale(0.85); cursor: not-allowed; }

/* the result of a roll (the playtest, 2026-10-22: "make it more evident what happened after the roll") */
.tp-result { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--k-black) 55%, transparent); }
.tp-result[hidden] { display: none; }
.tp-result .tp-dialog { max-width: 560px; width: 100%; border-width: 2px; }
.tp-result .tp-dialog.ok { border-color: var(--k-grn); box-shadow: 0 0 24px color-mix(in srgb, var(--k-grn) 30%, transparent); }
.tp-result .tp-dialog.bad { border-color: var(--k-red); box-shadow: 0 0 24px color-mix(in srgb, var(--k-red) 30%, transparent); }
.tp-result .ok .k-kicker { color: var(--k-grn); }
.tp-result .bad .k-kicker { color: var(--k-red); }
.tp-result-text { font-size: 18px; line-height: 1.45; margin: 10px 0; }
.tp-result-lines { margin: 6px 0 12px; padding-left: 18px; color: var(--k-muted); font-size: 14px; }
.tp-hour b { position: absolute; right: 8px; top: 3px; font: 700 9px/1 var(--k-mono); letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 2px #000; z-index: 1; } /* the day counter */
.tp-hour i { top: 14px; }

/* a case's Mission Journal (cases.php): a pill under the chip, shaped like it; tap to open the case file */
.ps .tp-mission { display: flex; flex-direction: column; gap: 6px; max-width: min(340px, calc(100vw - 100px)); }
.ps .tp-mission[hidden] { display: none; }
.ps .tp-mission-pill { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 14px 5px 5px; border: 1px solid var(--k-line); border-radius: var(--k-pill); background: color-mix(in srgb, var(--k-black) 78%, transparent); color: var(--k-text); font: inherit; text-align: left; cursor: pointer; }
.ps .tp-mission-pill i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--k-line); color: var(--k-cyan); font-style: normal; font-size: 20px; }
.ps .tp-mission-pill span { display: flex; flex-direction: column; min-width: 0; }
.ps .tp-mission-pill b { font-size: 14px; }
.ps .tp-mission-pill small { font-size: 11px; color: var(--k-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps .tp-mission-pill[aria-expanded="true"] { border-color: var(--k-cyan); }
.ps .tp-mission-panel { padding: 10px 14px; border: 1px solid var(--k-line); border-radius: 14px; background: color-mix(in srgb, var(--k-black) 88%, transparent); max-height: 46vh; overflow-y: auto; }
.ps .tp-mission-panel p { margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--k-text); }
.ps .tp-mission-panel p:last-child { margin: 0; }

/* the detective board (cases.php trmnl_play_case_board): photos pinned in columns, red strings between them; pick a
   photo and the hand shows its cards (ui.js boardRender) */
.ps .tp-board { position: absolute; left: 50%; z-index: 4; width: min(1100px, calc(100% - 24px)); transform: translateX(-50%); }
.ps .tp-board[hidden] { display: none; }
.ps .tp-board-in { position: relative; display: flex; align-items: flex-start; gap: 18px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 16px 18px 12px; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, #2a1c12 55%, transparent); box-shadow: inset 0 0 40px color-mix(in srgb, var(--k-black) 60%, transparent); }
.ps .tp-strings { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; } /* over the photos, pinned at their tops */
.ps .tp-strings path { fill: none; stroke: #d6343f; stroke-width: 2; opacity: 0.85; }
.ps .tp-strings circle { fill: #ff5c6c; stroke: var(--k-black); stroke-width: 1; }
.ps .tp-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.ps .tp-col-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 260px; }
.ps .tp-pin { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 104px; padding: 6px 6px 7px; border: 0; border-radius: 3px; background: #ece4d3; color: #1b1712; font: inherit; text-align: center; cursor: pointer; box-shadow: 0 4px 10px color-mix(in srgb, var(--k-black) 70%, transparent); transform: rotate(-1.5deg); transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; }
.ps .tp-pin:nth-child(even) { transform: rotate(1.8deg); }
.ps .tp-pin img { width: 92px; height: 58px; object-fit: cover; image-rendering: pixelated; }
.ps .tp-pin i { display: grid; place-items: center; width: 92px; height: 58px; background: #2b2a33; color: #c9c3b6; font-style: normal; font-size: 26px; }
.ps .tp-pin b { font-size: 12px; line-height: 1.15; }
.ps .tp-pin small { font-size: 10px; line-height: 1.15; color: #5a5146; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps .tp-pin:not(.here) { opacity: 0.72; }
.ps .tp-pin:hover { opacity: 1; transform: rotate(0) translateY(-3px); }
.ps .tp-pin.sel { opacity: 1; transform: rotate(0) translateY(-6px) scale(1.06); box-shadow: 0 0 0 3px var(--k-cyan), 0 8px 18px color-mix(in srgb, var(--k-black) 75%, transparent); }
.ps .tp-pin.m-target::after, .ps .tp-pin.m-rumor::after, .ps .tp-pin.m-backup::after, .ps .tp-pin.m-told::after { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px var(--k-mono); color: #fff; }
.ps .tp-pin.m-target::after { content: "✓"; background: #2fb85a; }
.ps .tp-pin.m-rumor::after { content: "?"; background: #d68a1f; }
.ps .tp-pin.m-backup::after { content: "!"; background: #d6343f; }
.ps .tp-pin.m-told::after { content: "✓"; background: #6b6b6b; }
.ps .tp-board-note { margin: 6px auto 0; max-width: 760px; text-align: center; font-size: 14px; color: var(--k-text); text-shadow: 0 1px 3px var(--k-black); }
.ps.has-board .ps-cine.story .cine-line { font-size: clamp(16px, 0.8vw + 11px, 22px); }
@media (max-width: 700px) { .ps.has-board .ps-cine .cine-line.old { display: none; } .ps .tp-board-in { overflow-x: auto; scrollbar-width: thin; } .ps .tp-pin { width: 84px; } .ps .tp-pin img, .ps .tp-pin i { width: 74px; height: 46px; } .ps .tp-board-in { gap: 10px; padding: 10px; } }