@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
body { background-color: #fca5a5; font-family: 'DotGothic16', sans-serif; min-height: 100vh; overflow: hidden; position: relative; }

/* Styling custom red scrollbars if editable forms expand too far */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(225, 29, 72, 0.05); }
::-webkit-scrollbar-thumb { background: #fda4af; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #f43f5e; }

/* --- BACKGROUND RED MATTE CUTE BOARD GRID --- */
.bulletin-board-canvas {
    position: absolute; 
    width: 600%; height: 600%; 
    top: -250%; left: -250%;
    background-color: #ffe4e6; 
    background-image: 
        radial-gradient(rgba(225, 29, 72, 0.18) 15%, transparent 16%), 
        linear-gradient(to right, #fecdd3 2px, transparent 2px), 
        linear-gradient(to bottom, #fecdd3 2px, transparent 2px);
    background-size: 20px 20px, 10px 10px, 120px 120px, 120px 120px;
    z-index: 1; image-rendering: pixelated; 
    box-shadow: inset 0 0 200px rgba(225, 29, 72, 0.25);
}

#string-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* Velvet Crimson Connecting Yarn Ribbons */
.detective-string {
    position: absolute; height: 5px; background-color: #e11d48; border-bottom: 2px solid #9f1239;
    pointer-events: none; opacity: 0.95; transform-origin: 0 50%;
    will-change: transform, width, top, left; filter: drop-shadow(2px 3px 2px rgba(159,18,57,0.15));
}

/* --- DRAG ENGINE MATRIX LAYER CONTAINER --- */
.desk-surface { 
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; 
    transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1));
    transform-origin: center center; will-change: transform;
}

.note {
    position: absolute; top: 0; left: 0; z-index: 10; 
    transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rot, 0deg)) scale(var(--s, 1)) skewX(var(--skew, 0deg));
    box-shadow: 6px 8px 0px rgba(225, 29, 72, 0.14);
    display: flex; flex-direction: column; overflow: hidden;
    will-change: transform, width, height, box-shadow; transition: box-shadow 0.15s ease;
}
.note:hover { box-shadow: 10px 14px 0px rgba(225, 29, 72, 0.2); }
.note.dragging { box-shadow: 20px 24px 0px rgba(225, 29, 72, 0.1) !important; z-index: 9999 !important; }
.note.resizing, .note.rotating { z-index: 9999 !important; transition: none; }

.resize-handle {
    position: absolute; width: 22px; height: 22px; right: 0; bottom: 0;
    background: linear-gradient(135deg, transparent 40%, #be123c 40%, #be123c 60%, transparent 60%, transparent 80%, #be123c 80%);
    background-size: 5px 5px; cursor: nwse-resize !important; z-index: 50;
}
.polaroid-clue .resize-handle { display: none !important; } /* Fix Polaroid sizes */

.card-rotate-btn {
    position: absolute; top: 6px; left: 8px; font-size: 0.95rem; color: rgba(159,18,57,0.4); font-weight: bold;
    cursor: ew-resize !important; z-index: 40; background: rgba(255,255,255,0.6); border-radius: 4px; padding: 0 5px;
}
.card-edit-btn { position: absolute; top: 6px; right: 8px; font-size: 0.9rem; color: rgba(159,18,57,0.4); cursor: pointer !important; z-index: 40; }
.card-rotate-btn:hover, .card-edit-btn:hover { color: #e11d48; background: #fff; }

.editing-mode .edit-field {
    outline: 2px dashed #f43f5e; background: rgba(255, 255, 255, 0.85); padding: 2px 5px; user-select: text !important; cursor: text !important;
}

/* --- FLOATING CONTROLS & DRAWER HUGS --- */
.action-btn-hub { 
    position: absolute; top: 16px; left: 16px; width: 50px; height: 50px; 
    background-color: #e11d48; border: 4px solid #9f1239; color: #ffffff; 
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 4px 4px 0px rgba(159, 18, 57, 0.3); z-index: 9999; cursor: pointer; border-radius: 8px;
}
.action-btn-hub span { font-size: 2.2rem; font-weight: bold; transform: translateY(-2px); }

.mobile-lens-controls {
    position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9995;
}
.mobile-lens-controls button {
    width: 46px; height: 46px; border-radius: 50%; background: #ffffff; border: 3px solid #fecdd3;
    color: #e11d48; font-size: 1.3rem; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.15); display: flex; align-items: center; justify-content: center;
}
.mobile-lens-controls button:active { background: #ffe4e6; transform: scale(0.95); }

/* Sidebar Layout Settings */
.creation-drawer { 
    position: absolute; top: 0; left: -250px; width: 230px; height: 100vh; 
    background-color: rgba(255, 255, 255, 0.96); border-right: 6px solid #fecdd3; z-index: 9990; 
    padding: 85px 16px 24px 16px; display: flex; flex-direction: column; gap: 16px; 
    backdrop-filter: blur(10px); box-shadow: 12px 0px 35px rgba(225, 29, 72, 0.12); transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
.creation-drawer.open { transform: translateX(250px); }
.drawer-header { color: #9f1239; font-size: 0.9rem; text-align: center; border-bottom: 2px dashed #fecdd3; padding-bottom: 8px; font-weight: bold; letter-spacing: 1px; }
.template-item { background: #fff5f5; border: 3px solid #fecdd3; padding: 10px; display: flex; align-items: center; gap: 12px; color: #9f1239; font-size: 0.8rem; font-weight: bold; cursor: pointer; border-radius: 6px; }
.template-item:hover { background: #ffe4e6; border-color: #e11d48; }
.mini-preview { width: 30px; height: 25px; border: 2px solid rgba(0,0,0,0.06); border-radius: 3px; }
.folder-preview { background-color: #fca5a5; } .polaroid-preview { background-color: #fafaf9; } .newspaper-preview { background-color: #f5f5f4; } .scrap-preview { background-color: #fef08a; }

.danger-wipe-btn {
    margin-top: auto; width: 100%; background: #9f1239; color: white; border: none; padding: 10px; font-family: 'DotGothic16', sans-serif; font-size: 0.75rem; cursor: pointer; border-radius: 4px; letter-spacing: 0.5px;
}
.danger-wipe-btn:hover { background: #e11d48; }

/* Pins Elements */
.card-pin { width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); border: 2px solid rgba(0,0,0,0.12); z-index: 20; box-shadow: 1px 2px 2px rgba(0,0,0,0.15); pointer-events: none; }
.red-pin { background-color: #e11d48; } .silver-tack { background-color: #fb7185; }

/* Folder Structural Cards Layout */
.case-folder-card { background-color: #fee2e2; border: 4px solid #f87171; padding: 28px 18px 18px 18px; font-family: 'Courier Prime', monospace; color: #4c0519; border-radius: 2px 12px 12px 12px; }
.folder-tab { position: absolute; top: -26px; left: -4px; background-color: #fee2e2; border: 4px solid #f87171; border-bottom: none; font-size: 0.75rem; font-weight: bold; padding: 3px 12px; color: #9f1239; border-radius: 8px 8px 0 0; pointer-events: none; }
.case-folder-card h3 { font-size: 1.15rem; margin-bottom: 4px; font-weight: bold; color: #881337; } .case-folder-card hr { border: none; border-top: 2px dashed #f87171; margin-bottom: 12px; } .case-folder-card p { font-size: 0.85rem; line-height: 1.4; word-break: break-word; }

/* Tic Tac Toe Grid Style Rules */
.suspect-cipher-card { background-color: #ffffff; border: 4px solid #e11d48; border-radius: 8px; }
.cipher-header { background-color: #e11d48; color: #ffffff; padding: 7px 12px; font-size: 0.8rem; font-weight: bold; text-align: center; pointer-events: none; letter-spacing: 0.5px; }
.cipher-body { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; background-color: #e11d48; padding: 5px; margin-bottom: 8px; border-radius: 4px; }
.ttt-cell { background-color: #fff1f2; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: bold; cursor: pointer; border-radius: 2px; }
.ttt-cell:hover { background-color: #ffe4e6; }
#reset-game { width: 100%; background-color: #9f1239; border: none; color: white; font-family: 'DotGothic16', sans-serif; padding: 8px; font-weight: bold; font-size: 0.8rem; cursor: pointer; border-radius: 4px; }
#reset-game:active { background-color: #e11d48; }

/* Fixed Size Polaroid Cards Controls */
.polaroid-clue { 
    background-color: #fafaf9; border: 1px solid #e7e5e4; 
    padding: 22px 12px 12px 12px; justify-content: space-between;
    width: 180px !important; height: 230px !important; border-radius: 2px;
}
.polaroid-photo-area { 
    width: 100%; height: 155px !important; background-color: #f5f5f4; border: 1px solid #e7e5e4; 
    position: relative; overflow: hidden; pointer-events: none; display: flex; align-items: center; justify-content: center; 
}
.polaroid-img-src { width: 100%; height: 100%; object-fit: cover; }
.polaroid-label { font-family: 'Courier Prime', monospace; font-size: 0.8rem; font-weight: bold; color: #44403c; text-align: center; width: 100%; margin-top: 8px; word-break: break-word; }

/* Newspaper Cutout Frame Clipping Rules */
.newspaper-clipping { background-color: #f5f5f4; border: 2px dashed #78716c; padding: 26px 14px 14px 14px; color: #1c1917; font-family: 'Courier Prime', monospace; }
.news-header { font-family: 'DotGothic16', sans-serif; font-size: 1.15rem; text-align: center; font-weight: 900; pointer-events: none; color: #0c0a09; letter-spacing: 0.5px; }
.double-line { border: none; border-top: 3px double #1c1917; margin-bottom: 8px; }
.newspaper-clipping h4 { font-size: 0.85rem; margin-bottom: 4px; font-weight: bold; color: #000; } .newspaper-clipping p { font-size: 0.75rem; line-height: 1.3; text-align: justify; word-break: break-word; }

/* Custom Floating Post-It Reminders */
.neon-scrap-note { background-color: #fef08a; border-left: 6px solid #ca8a04; padding: 24px 16px 16px 16px; color: #451a03; border-radius: 0 0 4px 14px; }
.scrap-tape { width: 55px; height: 15px; background-color: rgba(255,255,255,0.65); position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-1.5deg); border: 1px dashed rgba(0,0,0,0.04); pointer-events: none; }
.scrawled-text { font-weight: bold; text-decoration: underline; margin-bottom: 4px; font-size: 0.95rem; color: #713f12; } .neon-scrap-note p { font-size: 0.85rem; line-height: 1.3; word-break: break-word; }

/* --- ACTIVE ACTION COMPONENT OVERLAYS --- */
.card-delete-btn {
    position: absolute; top: 6px; right: 28px; font-size: 1.1rem; color: rgba(159,18,57,0.3);
    font-weight: bold; cursor: pointer !important; z-index: 40; line-height: 1;
    background: rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 0 4px; transition: all 0.12s ease;
}
.card-delete-btn:hover { color: #e11d48; background: #fff; }
.suspect-cipher-card .card-delete-btn { right: 8px; }

.card-wire-btn {
    position: absolute; top: 6px; right: 50px; width: 20px; height: 16px;
    display: flex; align-items: center; justify-content: center; cursor: pointer !important;
    z-index: 40; background: rgba(255, 255, 255, 0.5); border-radius: 4px; transition: all 0.12s ease;
}
.card-wire-btn:hover { background: #fff; }
.suspect-cipher-card .card-wire-btn { right: 30px; }

.wire-icon-inner { position: relative; width: 4px; height: 4px; background: rgba(159,18,57,0.5); border-radius: 50%; transform: translateX(-3px); }
.wire-icon-inner::after { content: ''; position: absolute; top: 0; left: 7px; width: 4px; height: 4px; background: rgba(159,18,57,0.5); border-radius: 50%; }
.wire-icon-inner::before { content: ''; position: absolute; top: 1px; left: 3px; width: 5px; height: 2px; background: rgba(159,18,57,0.5); }

/* Unified Wiring Modes States */
.global-wiring-mode #board-surface { cursor: crosshair !important; }
.global-wiring-mode .note { transition: box-shadow 0.2s ease, outline 0.2s ease; }
.global-wiring-mode .note:not(.wiring-source-active):hover {
    outline: 3px dashed #e11d48; box-shadow: 0 0 15px rgba(225, 29, 72, 0.5); cursor: cell;
}
.note.wiring-source-active {
    outline: 3px solid #e11d48 !important; box-shadow: 0 0 20px rgba(225, 29, 72, 0.6) !important;
    animation: wirePulse 1.2s infinite alternate ease-in-out;
}
@keyframes wirePulse {
    0% { transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rot, 0deg)) scale(1.03); }
    100% { transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rot, 0deg)) scale(0.98); }
}

/* --- SPARKS FLOATING HEART PARTICLES --- */
.heart-fx {
    position: fixed; pointer-events: none; z-index: 10000; font-size: 1.5rem;
    animation: particleFly 0.8s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
    will-change: transform, opacity;
}
@keyframes particleFly {
    0% { transform: translate(-50%, -50%) translate(0, 0) scale(0.5) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--rot)); opacity: 0; }
}

/* --- RESPONSIVE PHONE VIEWPORT MEDIA QUERY STRETCHING --- */
@media (max-width: 768px) {
    .creation-drawer {
        width: 100%; left: -100%; border-right: none; border-bottom: 8px solid #fecdd3; padding-top: 75px;
    }
    .creation-drawer.open { transform: translateX(100%); }
    .action-btn-hub { top: 12px; left: 12px; width: 44px; height: 44px; }
    .mobile-lens-controls { bottom: 14px; right: 14px; gap: 6px; }
    .mobile-lens-controls button { width: 42px; height: 42px; font-size: 1.1rem; }
    
    /* Ensure user editing mode options don't cascade past window view borders */
    .note { max-width: 85vw; }
}