/* MYSTERY ROOMS – Pinnwand (Plattform-Baustein) */
.mrb { position: relative; overflow: hidden; background: #241a12; touch-action: none; user-select: none; -webkit-user-select: none; font-family: "Inter", system-ui, sans-serif; }
.mrb-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.mrb-viewport:active { cursor: grabbing; }
.mrb-surface { position: absolute; left: 0; top: 0; transform-origin: 0 0;
  background-color: #a97e52;
  background-image: radial-gradient(#7d5a3622 1px, transparent 1.6px), radial-gradient(#ffffff14 1px, transparent 1.4px), radial-gradient(ellipse at 30% 20%, #c49a6a55, transparent 60%), radial-gradient(ellipse at 80% 80%, #6e4b2a66, transparent 60%);
  background-size: 7px 7px, 11px 11px, 100% 100%, 100% 100%; background-position: 0 0, 3px 5px, 0 0, 0 0;
  box-shadow: inset 0 0 0 14px #5a3f27, inset 0 0 60px #00000080; border-radius: 6px; }
.mrb-threads { position: absolute; inset: 0; overflow: visible; }
.mrb-thread .line { fill: none; stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(0 2px 1px #0006); }
.mrb-thread .hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; cursor: pointer; }
.mrb-thread.sel .line { stroke-width: 5; }
.mrb-tlabel { display: inline-block; max-width: 180px; padding: 2px 7px; background: #fbf6e8; border-left: 3px solid var(--c); color: #2a2119; font: italic 13px/1.3 Georgia, serif; box-shadow: 0 2px 4px #0005; transform: rotate(-1.5deg); }
/* Die Kartenebene liegt über den Fäden, darf sie aber nicht verdecken: nur Karten fangen Klicks */
.mrb-items { position: absolute; inset: 0; pointer-events: none; }
.mrb-items .mrb-item { pointer-events: auto; }
.mrb-item { position: absolute; transform: rotate(var(--rot)); transition: box-shadow .2s, transform .15s; cursor: pointer; }
.mrb-item.lifted { transform: rotate(var(--rot)) scale(1.04); box-shadow: 0 18px 30px #0008 !important; z-index: 5; }
.mrb-item.sel, .mrb-item.pending { outline: 3px solid #f3c77e; outline-offset: 4px; }
.mrb-item.pending { animation: mrb-pulse 1.2s ease-in-out infinite; }
@keyframes mrb-pulse { 50% { outline-color: #f3c77e55; } }
.mrb-item .pin { position: absolute; left: 50%; top: -7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #b3261e 60%, #6d150f); box-shadow: 0 3px 3px #0007; z-index: 2; }
.mrb-card { background: #f4efe3; padding: 10px; box-shadow: 0 6px 14px #0007; display: flex; flex-direction: column; }
.mrb-photo { background: #f7f4ee; padding: 9px 9px 0; }
.mrb-art { flex: 1; min-height: 0; overflow: hidden; background: #1b1d22; }
.mrb-art svg { width: 100%; height: 100%; display: block; }
.mrb-doc .mrb-art { background: none; }
.mrb-label { padding: 7px 2px 6px; color: #2a2119; line-height: 1.2; }
.mrb-label b { display: block; font: 600 13px/1.25 Georgia, serif; }
.mrb-label small { display: block; font-size: 11px; color: #6c5a44; margin-top: 2px; }
.mrb-note { background: var(--note); padding: 20px 14px 10px; box-shadow: 0 6px 12px #0006; }
.mrb-note p { margin: 0; color: #2a2119; font: 14px/1.35 "Inter", sans-serif; overflow: hidden; max-height: 100%; word-break: break-word; }
.mrb-note p.hand { font: italic 16px/1.3 Georgia, serif; color: #23285a; }
.mrb-note small { position: absolute; right: 12px; bottom: 8px; font: italic 13px Georgia, serif; color: #23285a; }

/* Spielstand: widerlegte und bestätigte Fäden, Stempel */
.mrb-tlabel .txt { display: block; }
.mrb-ttag { display: block; margin-top: 2px; font: 600 10px ui-monospace, monospace; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.mrb-thread.refuted .line { stroke: #6b625a !important; stroke-dasharray: 2 9; opacity: .75; }
.mrb-thread.refuted .mrb-tlabel { --c: #6b625a !important; opacity: .85; }
.mrb-thread.refuted .mrb-tlabel .txt { text-decoration: line-through; text-decoration-color: #b3261e; text-decoration-thickness: 2px; }
.mrb-thread.confirmed .line { stroke-width: 4; }
.mrb-thread.just .line { animation: mrb-flash 1.4s ease-out 2; }
@keyframes mrb-flash { 30% { stroke-width: 9; } }
.mrb-stamp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-14deg); padding: 3px 9px; border: 3px solid #2e8a55; border-radius: 4px; color: #2e8a55; background: #f4efe3cc; font: 800 17px/1 ui-monospace, monospace; letter-spacing: .12em; pointer-events: none; mix-blend-mode: multiply; z-index: 3; }
.mrb-item.convicted .mrb-stamp { border-color: #b3261e; color: #b3261e; }
.mrb-item.cleared .mrb-art { filter: grayscale(.7) brightness(.9); }
.mrb-item.stamp-in .mrb-stamp { animation: mrb-stamp .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mrb-stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(2.4); opacity: 0; } }
.mrb-popsub { margin: -4px 0 12px; font-size: 13px; color: #a3a8b4; }
.mrb-popstack { flex-direction: column; }
.mrb-popstack button { width: 100%; }

/* Werkzeugleiste */
.mrb-toolbar { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 4px; padding: 6px; background: #0e1015f0; border: 1px solid #5a4a33; border-radius: 14px; box-shadow: 0 10px 30px #000a; max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
.mrb-toolbar button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: 7px 8px; background: none; border: 1px solid transparent; border-radius: 10px; color: #e6dfd3; font: 18px/1 system-ui; cursor: pointer; }
.mrb-toolbar button span { font: 10px var(--mono, ui-monospace, monospace); letter-spacing: .06em; color: #b9b2a5; }
.mrb-toolbar button.on { background: #d5ad6226; border-color: #d5ad62; }
.mrb-toolbar button:hover { border-color: #5a4a33; }
.mrb-colors { display: flex; gap: 4px; padding: 0 4px; }
.mrb-colors button { min-width: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid #0e1015; box-shadow: 0 0 0 1px #ffffff30; }
.mrb-colors button.on { box-shadow: 0 0 0 2px #f3c77e; }
.mrb-sep { width: 1px; align-self: stretch; background: #ffffff22; margin: 0 4px; }
.mrb-toolbar [data-act^="zoom"], .mrb-toolbar [data-act="fit"] { min-width: 40px; font-size: 20px; }
.mrb-hint { position: absolute; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); z-index: 9; margin: 0; padding: 7px 14px; background: #0e1015e6; color: #f3e6c4; font-size: 13px; border-radius: 20px; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.mrb-hint.show { opacity: 1; transform: translate(-50%, 0); }
.mrb.tool-thread .mrb-viewport { cursor: crosshair; }
.mrb.tool-delete .mrb-item:hover { outline: 3px dashed #b3261e; outline-offset: 3px; }

/* kleine Fenster */
.mrb-pop { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #0008; }
.mrb-pop[hidden] { display: none; }
.mrb-popbox { width: min(360px, calc(100% - 32px)); padding: 18px; background: #16181d; border: 1px solid #5a4a33; border-radius: 12px; color: #e6dfd3; box-shadow: 0 20px 50px #000c; }
.mrb-poptitle { margin: 0 0 10px; font: 600 12px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #d5ad62; }
.mrb-popnote { margin: 0 0 12px; font: italic 15px Georgia, serif; color: #f3e6c4; }
.mrb-popbox textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #3a3a32; border-radius: 8px; background: #0e1015; color: #f1eee7; font: 16px/1.4 "Inter", sans-serif; resize: vertical; }
.mrb-notecolors, .mrb-threadcolors { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.mrb-notecolors button { width: 32px; height: 32px; border-radius: 6px; background: var(--note); border: 2px solid transparent; cursor: pointer; }
.mrb-notecolors button.on { border-color: #f3c77e; }
.mrb-threadcolors button { flex: 1 1 45%; padding: 9px 8px; border-radius: 8px; background: #0e1015; border: 1px solid #3a3a32; border-left: 6px solid var(--c); color: #e6dfd3; font-size: 13px; text-align: left; cursor: pointer; }
.mrb-threadcolors button.on { border-color: #f3c77e; border-left-color: var(--c); }
.mrb-popactions { display: flex; justify-content: space-between; gap: 10px; }
.mrb-popactions button { padding: 10px 16px; border-radius: 8px; border: 1px solid #5d2f2a; background: none; color: #e7a99e; font-size: 14px; cursor: pointer; }
.mrb-popactions button.primary { border: 0; background: #d5ad62; color: #141821; font-weight: 600; }

@media (max-width: 560px) {
  .mrb-toolbar button { min-width: 44px; padding: 7px 5px; }
  .mrb-toolbar button span { display: none; }
  .mrb-colors button { width: 24px; height: 24px; }
  .mrb-hint { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); white-space: normal; text-align: center; }
}