/* =========================================
   DESTROYGRAM — Dark Mode Instagram Clone
   Layout: top header + destruction panel
           + feed + bottom nav
   ========================================= */

:root {
    /* Dark mode Instagram colors */
    --bg:            #121212;
    --surface:       #121212;
    --surface-2:     #1c1c1c;
    --border:        #262626;
    --text:          #f5f5f5;
    --text-secondary:#a8a8a8;
    --text-muted:    #737373;
    --blue:          #0095f6;
    --blue-hover:    #1877f2;
    --red:           #ff3040;
    --story-grad:    linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --header-h:      56px;
    --chaos-bar-h:   46px;
    --bottom-nav-h:  49px;
    --chaos-red:     #ff0040;
    --chaos-orange:  #ff6600;
    --chaos-purple:  #8b00ff;
    --chaos-neon:    #00ff88;
    --chaos-dark:    #0d0015;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; overflow-x: hidden; touch-action: manipulation; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    touch-action: manipulation;
}

a { text-decoration: none; color: inherit; }
img { display: block; }

/* =============================================
   TOP HEADER — Instagram style dark
   ============================================= */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 100001;
    display: flex;
    align-items: center;
}

.top-header-inner {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* On wider screens show full width with sidebar layout */
@media (min-width: 1000px) {
    .top-header-inner {
        max-width: 975px;
    }
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-logo {
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.5px;
    background: var(--story-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity 0.2s;
    user-select: none;
    text-align: center;
    white-space: nowrap;
}

.header-logo:hover { opacity: 0.8; }

.logo-com {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: 0;
    vertical-align: middle;
    -webkit-text-fill-color: transparent;
    background: var(--story-grad);
    -webkit-background-clip: text;
    background-clip: text;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.header-icon {
    font-size: 24px;
    color: var(--text);
    cursor: pointer;
    position: relative;
    line-height: 1;
    transition: opacity 0.2s;
}

.header-icon:hover { opacity: 0.6; }

.notif-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid var(--bg);
}

/* =============================================
   DESTRUCTION PANEL
   ============================================= */
.chaos-toolbar {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    height: var(--chaos-bar-h);
    z-index: 100000;
    background: var(--bg);
    border-bottom: 1.5px solid rgba(255, 0, 64, 0.5);
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 16px rgba(255, 0, 64, 0.18);
    overflow-x: auto;
    scrollbar-width: none;
}

.chaos-toolbar::-webkit-scrollbar { display: none; }

.chaos-toolbar-title {
    color: var(--chaos-red);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    text-shadow: 0 0 8px var(--chaos-red);
    flex-shrink: 0;
    animation: title-glow 2s infinite;
}

@keyframes title-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.chaos-buttons {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.chaos-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255, 0, 64, 0.25);
    color: #fff;
    border-radius: 7px;
    padding: 4px 9px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    white-space: nowrap;
    min-width: 50px;
}

.chaos-btn span {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.chaos-btn:hover {
    background: rgba(255, 0, 64, 0.18);
    border-color: var(--chaos-red);
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.3);
}

.chaos-btn.active {
    background: var(--chaos-red);
    border-color: var(--chaos-red);
    box-shadow: 0 0 14px rgba(255, 0, 64, 0.5);
}

.chaos-btn-ultimate {
    background: linear-gradient(135deg, #ff0040, #8b00ff) !important;
    border: 1px solid #ff0040 !important;
}

.chaos-btn-reset {
    background: rgba(0, 255, 136, 0.08) !important;
    border-color: var(--chaos-neon) !important;
    color: var(--chaos-neon) !important;
}

.chaos-btn-reset:hover {
    background: rgba(0, 255, 136, 0.2) !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3) !important;
}

.chaos-btn-mafia {
    background: linear-gradient(135deg, #1a0a00, #4a1a00) !important;
    border: 1px solid #c8891a !important;
    color: #c8891a !important;
}
.chaos-btn-mafia:hover {
    background: linear-gradient(135deg, #4a1a00, #7a2a00) !important;
    box-shadow: 0 0 12px rgba(200,137,26,0.45) !important;
}
.chaos-btn-mafia.active {
    background: linear-gradient(135deg, #7a2a00, #c84a00) !important;
    border-color: #ffaa33 !important;
    box-shadow: 0 0 18px rgba(255,150,30,0.65) !important;
}

/* =============================================
   LOCKED MODE BUTTON BADGE
   ============================================= */
.locked-mode {
    position: relative;
    opacity: 0.72;
}
.locked-mode:hover { opacity: 1; }

.btn-lock-badge {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 7px;
    background: rgba(0,0,0,0.75);
    color: #ffd700;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    border: 1px solid #ffd700;
}

/* =============================================
   REWARDED AD MODAL
   ============================================= */
.reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(6px);
}
.reward-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.reward-modal {
    background: #0d0015;
    border: 1.5px solid rgba(255,0,64,0.55);
    border-radius: 18px;
    padding: 22px 20px 18px;
    width: min(92vw, 360px);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 40px rgba(255,0,64,0.28), 0 0 80px rgba(139,0,255,0.14);
    transform: scale(0.92);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.reward-overlay.open .reward-modal {
    transform: scale(1);
}

.reward-lock-icon {
    font-size: 32px;
    color: #ffd700;
    text-shadow: 0 0 18px rgba(255,215,0,0.7);
    animation: lock-pulse 1.8s ease-in-out infinite;
}
@keyframes lock-pulse {
    0%,100% { transform: scale(1);   text-shadow: 0 0 18px rgba(255,215,0,0.7); }
    50%      { transform: scale(1.12); text-shadow: 0 0 30px rgba(255,215,0,1); }
}

.reward-mode-label {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(90deg,#ff0040,#ff6600,#ffcc00,#00ff88,#8b00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

.reward-desc {
    font-size: 13px;
    color: #c0c0c0;
    text-align: center;
    line-height: 1.5;
}
.reward-desc strong { color: #fff; }
.reward-price {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    display: inline-block;
    margin: 0 2px;
}

/* ── Ad area ── */
.reward-ad-area {
    width: 100%;
    min-height: 120px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* — ad placeholder styles removed — */

.reward-timer-label {
    font-size: 11px;
    color: #888;
    text-align: center;
    min-height: 16px;
}

/* PayPal button container */
.paypal-btn-wrap {
    width: 100%;
    margin-top: 4px;
}

.reward-skip-btn {
    background: none;
    border: none;
    color: #555;
    font-size: 11px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
}
.reward-skip-btn:hover { color: #999; }



/* — Tommy gun widget fixed at bottom — */
.mafia-gun {
    position: fixed;
    bottom: calc(var(--bottom-nav-h, 60px));
    transform: translateX(-50%);
    z-index: 99995;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.8));
    transition: left 0.05s linear;
}

/* — muzzle flash — */
.mafia-muzzle-flash {
    position: fixed;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe066 25%, #ff9900 55%, rgba(255,80,0,0) 100%);
    pointer-events: none;
    z-index: 99997;
    animation: mf-pop 0.09s ease-out forwards;
}
@keyframes mf-pop {
    0%   { opacity:1; transform: translate(-50%,-50%) scale(0.4); }
    40%  { opacity:1; transform: translate(-50%,-50%) scale(1.4); }
    100% { opacity:0; transform: translate(-50%,-50%) scale(1.1); }
}

/* — shell casings — */
.mafia-shell {
    position: fixed;
    width: 6px;
    height: 14px;
    border-radius: 2px 2px 1px 1px;
    background: linear-gradient(180deg, #e8c84a 0%, #b89022 50%, #8a6a10 100%);
    box-shadow: inset -1px 0 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 99994;
}

/* — bullet holes (canvas elements, position:absolute on body) — */
.mafia-bullet-hole {
    /* rendered via canvas — just ensure isolation */
    mix-blend-mode: normal;
}

/* — spider crack overlay — */
.mafia-crack-overlay {
    mix-blend-mode: multiply;
}

/* — text that fell completely off and landed on the bottom bar — */
.mafia-fallen-text {
    z-index: 100010;
    will-change: transform;
}

/* =============================================
   MAIN CONTENT LAYOUT
   ============================================= */
.main-content {
    padding-top: calc(var(--header-h) + var(--chaos-bar-h) + env(safe-area-inset-top));
    padding-bottom: var(--bottom-nav-h);
    max-width: 975px;
    margin: 0 auto;
    display: flex;
    gap: 28px;
    padding-left: 0;
    padding-right: 0;
}

.feed-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 470px;
    margin: 0 auto;
}

@media (min-width: 1000px) {
    .main-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .feed-wrapper {
        margin: 0;
    }
}

/* =============================================
   NATIVE / SPONSORED AD CARDS
   ============================================= */

/* Sponsored badge next to username */
.native-ad-sponsored-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Thin top accent line so it stands out from regular posts */
.native-ad-card {
    border-top: 1.5px solid rgba(255, 200, 0, 0.18) !important;
    position: relative;
}
.native-ad-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(255,200,0,0.35), transparent);
    pointer-events: none;
}

/* CTA button overlaid on the image (bottom-left, like Instagram) */
.native-ad-image-wrap { position: relative; }
.native-ad-cta-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
}
.native-ad-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.92);
    color: #111;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.native-ad-cta-btn:hover {
    background: #fff;
    transform: translateY(-1px);
}

/* Footer: headline + CTA link */
.native-ad-footer {
    padding: 10px 14px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--border);
}
.native-ad-headline {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
    margin: 0;
}
.native-ad-footer-cta {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    padding-top: 1px;
    transition: opacity 0.15s;
}
.native-ad-footer-cta:hover { opacity: 0.75; }

/* Monetag native slot wrapper */
.monetag-native-slot { width: 100%; min-height: 80px; }
.native-ad-monetag { padding: 10px 0; }
.native-ad-sponsored-label {
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 14px 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =============================================
   STORIES BAR
   ============================================= */
.stories-container {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 10px 0 12px;
    overflow: hidden;
}

.stories-scroll {
    display: flex;
    gap: 12px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.stories-scroll::-webkit-scrollbar { display: none; }

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.story-item:hover { opacity: 0.85; }

.story-ring-wrap {
    position: relative;
    width: 76px;
    height: 76px;
}

.story-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    background: var(--border);
}

.story-ring.has-story {
    background: var(--story-grad);
    padding: 2.5px;
}

.story-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--bg);
    object-fit: cover;
    background: var(--surface-2);
}

.story-add {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    background: var(--blue);
    border-radius: 50%;
    border: 2px solid var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.story-username {
    font-size: 13px;
    color: var(--text);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* =============================================
   POST CARD — pixel-perfect dark Instagram
   ============================================= */
.post-card {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    position: relative;
    transition: all 0.4s ease;
    transform-origin: center;
    overflow: visible;
}

/* Posts are separated by the border only — no gap/card radius on mobile like IG */
.feed .post-card + .post-card {
    border-top: none;
}

/* Post header */
.post-header {
    display: flex;
    align-items: center;
    padding: 11px 12px;
    gap: 10px;
}

.post-avatar-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.post-avatar-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 2px;
    background: var(--story-grad);
}

.post-avatar-ring.no-story {
    background: var(--border);
}

.post-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg);
    background: var(--surface-2);
}

.post-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.post-username-row {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}

.post-username {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.post-follow-small {
    color: var(--blue);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.post-follow-small::before {
    content: "•";
    margin-right: 6px;
    color: var(--text-secondary);
    font-weight: 400;
}

.post-location {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.post-more {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 17px;
    padding: 6px;
    opacity: 0.85;
}

.post-more:hover { opacity: 1; }

/* Post image */
.post-image-container {
    width: 100%;
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.4s;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Post actions */
.post-actions {
    display: flex;
    align-items: center;
    padding: 6px 12px 4px;
}

.post-actions-left {
    display: flex;
    gap: 14px;
    flex: 1;
}

.post-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 24px;
    padding: 6px 2px;
    line-height: 1;
    transition: transform 0.15s, opacity 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-action-btn:hover { opacity: 0.65; }

.post-action-btn:active { transform: scale(0.88); }

.post-action-btn.liked {
    color: var(--red);
    animation: heart-pop 0.3s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

@keyframes heart-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.bookmark-btn {
    margin-left: auto;
}

/* Post metadata */
.post-likes {
    padding: 0 12px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.post-caption {
    padding: 0 12px 6px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.post-caption .cap-user {
    font-weight: 600;
    margin-right: 4px;
}

.post-view-comments {
    padding: 0 12px 4px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    display: block;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.post-comment-row {
    padding: 1px 12px;
    font-size: 14px;
    color: var(--text);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.post-comment-row .cmt-user {
    font-weight: 600;
    margin-right: 4px;
}

.post-time {
    padding: 4px 12px 8px;
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* Add comment row */
.post-add-comment {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    gap: 10px;
}

.post-emoji-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.post-comment-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--text);
    caret-color: var(--blue);
}

.post-comment-input::placeholder { color: var(--text-secondary); }

.post-submit-comment {
    background: none;
    border: none;
    color: var(--blue);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.post-submit-comment.can-post { opacity: 1; }

/* Double-tap heart overlay */
.double-tap-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 90px;
    color: #fff;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    animation: dt-heart 0.9s ease forwards;
}

@keyframes dt-heart {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    20%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    35%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
    65%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* =============================================
   SIDEBAR (desktop)
   ============================================= */
.sidebar {
    width: 319px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-h) + var(--chaos-bar-h) + 20px);
    height: fit-content;
    display: none;
    padding-top: 20px;
}

@media (min-width: 1000px) {
    .sidebar { display: block; }
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.sidebar-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
}

.sidebar-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-username {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.sidebar-name {
    font-size: 14px;
    color: var(--text-secondary);
}

.sidebar-switch {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sidebar-section { display: block; }

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.sidebar-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sidebar-header a {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.suggestion-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
}

.suggestion-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.suggestion-username {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.suggestion-sub {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.follow-btn {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.follow-btn:hover { opacity: 0.7; }

.sidebar-footer {
    margin-top: 24px;
    padding-top: 16px;
}

.sidebar-footer p {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.7;
}

.sidebar-copy {
    margin-top: 6px;
}

/* =============================================
   BOTTOM NAV — identical to Instagram
   ============================================= */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h);
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
}

/* Hide bottom nav on desktop — Instagram shows left sidebar instead */
@media (min-width: 1000px) {
    .bottom-nav {
        display: none;
    }
}

.bottom-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: var(--text);
    font-size: 28px;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
}

.bottom-nav-item:hover { opacity: 0.7; }

.bottom-nav-item.active i {
    font-weight: 900; /* filled icon */
}

.bottom-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
}

.bottom-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================
   SEARCH OVERLAY
   ============================================= */
.search-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 100006;
    display: none;
    flex-direction: column;
    padding-top: calc(var(--header-h) + var(--chaos-bar-h) + env(safe-area-inset-top));
}

.search-overlay.open {
    display: flex;
}

.search-overlay-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.search-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.search-bar-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border-radius: 10px;
    padding: 8px 14px;
}

.search-bar-box i {
    color: var(--text-secondary);
    font-size: 15px;
}

.search-bar-box input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text);
    width: 100%;
    caret-color: var(--blue);
}

.search-bar-box input::placeholder { color: var(--text-secondary); }

.search-cancel {
    background: none;
    border: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.search-recent-title {
    padding: 16px 16px 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.search-recent-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.search-recent-item:hover { background: var(--surface-2); }

.search-recent-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
    flex-shrink: 0;
}

.search-recent-item span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* =============================================
   FX CANVAS & EFFECTS
   ============================================= */
#fxCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100005;
}

.blackhole-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100002;
    display: none;
    justify-content: center;
    align-items: center;
}

.blackhole-overlay.active { display: flex; }

.blackhole-singularity {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    box-shadow:
        0 0 50px 25px rgba(0,0,0,0.9),
        0 0 100px 50px rgba(80,0,180,0.5),
        0 0 180px 70px rgba(180,0,60,0.25);
    animation: bh-pulse 1.5s ease-in-out infinite;
}

@keyframes bh-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.6); }
}

/* ── Glass Voronoi Fragmentation ─────────────────────── */

.glass-frag-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    border-radius: inherit;
    contain: layout style;
}

.story-item .glass-frag-container {
    z-index: 10;
}

.glass-mask-wrapper {
    position: relative;
    width: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.glass-fragment {
    position: absolute;
    inset: 0;
    will-change: transform;
    backface-visibility: hidden;
    contain: strict;
    transition: none;
    pointer-events: none;
}

/* Thin edge line visible on unreleased fragments */
.glass-fragment::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    clip-path: inherit;
    pointer-events: none;
}

.glass-fragment-released {
    filter: drop-shadow(0 0 0.4px rgba(255, 255, 255, 0.5));
    contain: layout style;
    overflow: hidden;
}

.glass-fragment-released::after {
    border-color: rgba(255, 255, 255, 0.35);
}





/* =============================================
   DESTRUCTION COUNTER
   ============================================= */
.destruction-counter {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + 12px);
    right: 14px;
    background: var(--chaos-dark);
    color: var(--chaos-red);
    border: 1px solid var(--chaos-red);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 100003;
    box-shadow: 0 3px 16px rgba(255, 0, 64, 0.25);
    transition: transform 0.2s;
    max-width: 280px;
}

.dc-top {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dc-xp-label {
    letter-spacing: 1px;
}

.dc-msg {
    display: none;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #aaa);
    text-align: center;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: dc-msg-in 0.25s ease-out;
}

.dc-msg.dc-msg-out { animation: dc-msg-out 0.25s ease-in forwards; }

@keyframes dc-msg-in  { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@keyframes dc-msg-out { from { opacity:1; transform:translateY(0); }    to { opacity:0; transform:translateY(-4px); } }

.destruction-counter i { animation: fire 0.5s infinite alternate; }

@keyframes fire {
    from { transform: scale(1) rotate(-5deg); }
    to   { transform: scale(1.15) rotate(5deg); }
}

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */
.toast-container {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + 60px);
    right: 14px;
    z-index: 100004;
    display: flex;
    flex-direction: column-reverse;
    gap: 7px;
    pointer-events: none;
}

.toast {
    background: var(--surface-2);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    border-left: 3px solid var(--chaos-red);
    box-shadow: 0 4px 18px rgba(0,0,0,0.6);
    animation: toast-in 0.25s ease-out;
    max-width: 300px;
}

.toast.toast-out { animation: toast-out 0.25s ease-in forwards; }

@keyframes toast-in  { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toast-out { from { opacity:1; transform:translateX(0);    } to { opacity:0; transform:translateX(40px); } }

/* =============================================
   CHAOS ANIMATION CLASSES
   ============================================= */
.earthquake { animation: quake 0.08s infinite; }

body.mode-gravity .post-header,
body.mode-gravity .post-image-container,
body.mode-gravity .post-actions,
body.mode-gravity .post-likes,
body.mode-gravity .post-caption,
body.mode-gravity .post-comment-row,
body.mode-gravity .post-view-comments,
body.mode-gravity .post-time,
body.mode-gravity .post-add-comment,
body.mode-gravity .story-item { cursor: grab; }
body.mode-gravity,
html.mode-gravity { overflow-x: hidden !important; overflow-y: auto !important; }
body.mode-gravity .post-card,
body.mode-gravity .stories-container,
body.mode-gravity .stories-scroll,
body.mode-gravity .main-content,
body.mode-gravity #feed { overflow: visible !important; }

/* =============================================
   KATANA BLADE (floating draggable weapon)
   ============================================= */
#katanaBlade {
    position: fixed;
    z-index: 99990;
    pointer-events: all;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: 6px 50%;
    transform: translate(-6px, -50%) rotate(var(--blade-angle, -45deg));
    transition: filter 0.15s;
    filter: drop-shadow(0 2px 12px rgba(100,180,255,0.35));
    display: flex;
    align-items: center;
    touch-action: none;
}
#katanaBlade.dragging {
    cursor: none;
    filter: drop-shadow(0 0 18px rgba(100,200,255,0.7)) drop-shadow(0 0 40px rgba(80,140,255,0.3));
}

/* Handle */
.katana-handle {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-shrink: 0;
}
.katana-guard {
    width: 6px;
    height: 24px;
    background: linear-gradient(180deg, #bba244, #8a7020, #bba244);
    border-radius: 2px;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}
.katana-grip {
    width: 38px;
    height: 14px;
    background: repeating-linear-gradient(90deg, #1a1a2e 0px, #1a1a2e 3px, #2a1a0a 3px, #2a1a0a 6px);
    border-radius: 2px;
    border: 1px solid #333;
}
.katana-pommel {
    width: 6px;
    height: 16px;
    background: linear-gradient(180deg, #bba244, #665520, #bba244);
    border-radius: 2px;
}

/* Blade */
.katana-blade-wrap {
    flex-shrink: 0;
    width: 110px;
    height: 10px;
    position: relative;
    overflow: visible;
}
.katana-edge {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(220,230,245,0.95) 0%,
        rgba(200,215,240,1) 30%,
        rgba(180,200,230,0.9) 60%,
        rgba(160,180,210,0.7) 100%
    );
    clip-path: polygon(0% 15%, 100% 40%, 100% 55%, 0% 85%);
    box-shadow: 0 0 4px rgba(200,220,255,0.3);
}
.katana-tip {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 14px solid rgba(210,225,245,0.9);
    filter: drop-shadow(0 0 3px rgba(200,220,255,0.5));
}

/* Idle floating animation */
#katanaBlade:not(.dragging) {
    animation: katana-float 3s ease-in-out infinite;
}
@keyframes katana-float {
    0%, 100% { filter: drop-shadow(0 2px 12px rgba(100,180,255,0.35)); }
    50%      { filter: drop-shadow(0 4px 18px rgba(100,180,255,0.5)); transform: translate(-6px, calc(-50% - 4px)) rotate(var(--blade-angle, -45deg)); }
}

/* Wall impact shake */
#katanaBlade.wall-impact {
    animation: katana-wall-shake 0.2s ease-out !important;
    filter: drop-shadow(0 0 14px rgba(255,180,50,0.7)) drop-shadow(0 0 30px rgba(255,120,20,0.4)) !important;
}
@keyframes katana-wall-shake {
    0%   { transform: translate(-6px, -50%) rotate(var(--blade-angle, -45deg)) translate(0, 0); }
    20%  { transform: translate(-6px, -50%) rotate(var(--blade-angle, -45deg)) translate(-4px, 2px); }
    40%  { transform: translate(-6px, -50%) rotate(var(--blade-angle, -45deg)) translate(3px, -3px); }
    60%  { transform: translate(-6px, -50%) rotate(var(--blade-angle, -45deg)) translate(-2px, 1px); }
    80%  { transform: translate(-6px, -50%) rotate(var(--blade-angle, -45deg)) translate(1px, -1px); }
    100% { transform: translate(-6px, -50%) rotate(var(--blade-angle, -45deg)) translate(0, 0); }
}

/* Impact ring at wall collision */
.katana-wall-ring {
    position: fixed;
    width: 0; height: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99991;
    transform: translate(-50%, -50%);
    animation: katana-ring-expand 0.4s ease-out forwards;
}
@keyframes katana-ring-expand {
    0%   { width: 0; height: 0; box-shadow: 0 0 8px 4px rgba(255,180,50,0.9), 0 0 20px 8px rgba(255,120,20,0.5); opacity: 1; }
    50%  { width: 40px; height: 40px; box-shadow: 0 0 6px 2px rgba(255,180,50,0.6), 0 0 15px 6px rgba(255,120,20,0.3); opacity: 0.7; }
    100% { width: 60px; height: 60px; box-shadow: 0 0 2px 1px rgba(255,180,50,0.1); opacity: 0; }
}

/* Ninja cut wrapper — overflow visible for falling pieces */
.ninja-cut-wrapper {
    position: relative;
    overflow: visible;
}

/* Glowing blade cut line */
.ninja-cut-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100,200,255,0.9) 8%,
        rgba(255,255,255,1) 20%,
        rgba(255,255,255,1) 80%,
        rgba(100,200,255,0.9) 92%,
        transparent 100%
    );
    box-shadow:
        0 0 6px  rgba(100,200,255,0.8),
        0 0 15px rgba(100,200,255,0.4),
        0 0 30px rgba(100,200,255,0.2);
    pointer-events: none;
    z-index: 5;
    animation: ninja-cut-flash 0.5s ease-out forwards;
}

@keyframes ninja-cut-flash {
    0%   { opacity: 1; box-shadow: 0 0 12px rgba(100,200,255,1), 0 0 30px rgba(100,200,255,0.7), 0 0 60px rgba(80,150,255,0.4); }
    40%  { opacity: 0.7; }
    100% { opacity: 0; box-shadow: none; }
}

@keyframes quake {
    0%   { transform: translate(0,0) rotate(0); }
    25%  { transform: translate(4px,-4px) rotate(0.4deg); }
    50%  { transform: translate(-4px,4px) rotate(-0.4deg); }
    75%  { transform: translate(4px,4px) rotate(0.4deg); }
    100% { transform: translate(-4px,-4px) rotate(-0.4deg); }
}

.glitch-mode {
    animation: glitch-anim 0.12s infinite;
}

@keyframes glitch-anim {
    0%   { transform: translate(0); filter: hue-rotate(0deg); }
    20%  { transform: translate(-3px,2px); filter: hue-rotate(80deg); }
    40%  { transform: translate(3px,-2px); filter: hue-rotate(160deg); clip-path: inset(15% 0 35% 0); }
    60%  { transform: translate(-2px,-2px); filter: hue-rotate(240deg); clip-path: inset(55% 0 8% 0); }
    80%  { transform: translate(2px,2px); filter: hue-rotate(320deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); clip-path: none; }
}

.glitch-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0,255,0,0.025) 2px,
        rgba(0,255,0,0.025) 4px
    );
    pointer-events: none;
    z-index: 99999;
    animation: scanlines 0.08s steps(1) infinite;
}

@keyframes scanlines {
    0%   { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

.melting {
    animation: melt-down 2.8s cubic-bezier(0.5, 0, 1, 0.8) forwards;
}

@keyframes melt-down {
    0%   { transform: scaleY(1) translateY(0);         filter: blur(0);    opacity:1; }
    30%  { transform: scaleY(1.04) scaleX(0.97) translateY(8px);  filter: blur(0.5px); }
    65%  { transform: scaleY(0.65) scaleX(1.18) translateY(55px); filter: blur(2px);   opacity:0.7; }
    100% { transform: scaleY(0.08) scaleX(2.1) translateY(180px); filter: blur(8px);   opacity:0; }
}

.vacuum-suck {
    animation: vacuum 0.9s cubic-bezier(0.5,0,0.5,1) forwards;
}

@keyframes vacuum {
    0%   { transform: scale(1) rotate(0);      opacity:1; }
    100% { transform: scale(0) rotate(1080deg); opacity:0; }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 599px) {
    .main-content {
        padding-left: 0;
        padding-right: 0;
    }

    .post-card {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}

/* =============================================
   C4 BOMB STICKER
   ============================================= */
.c4-sticker {
    position: absolute;
    z-index: 999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
    animation: c4-place 0.35s cubic-bezier(0.2,1.5,0.5,1) forwards;
}
@keyframes c4-place {
    0%   { transform: translate(-50%,-50%) scale(0) rotate(-20deg); opacity:0; }
    100% { transform: translate(-50%,-50%) scale(1)  rotate(0deg);  opacity:1; }
}
.c4-body {
    background: #2a2a2a;
    border: 2px solid #ff4400;
    border-radius: 6px;
    padding: 5px 10px 4px;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.c4-led {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff2200;
    box-shadow: 0 0 6px #ff2200, 0 0 14px #ff4400;
    animation: c4-blink 0.7s ease-in-out infinite alternate;
}
@keyframes c4-blink {
    from { opacity:1; }
    to   { opacity:0.2; }
}
.c4-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff4400;
    font-family: monospace;
}
.c4-wires {
    display: flex;
    gap: 3px;
}
.c4-wire {
    width: 1.5px;
    height: 12px;
}

/* =============================================
   DETONATOR WIDGET
   ============================================= */
.detonator-wrap {
    position: fixed;
    bottom: 140px;
    right: 16px;
    z-index: 99999;
    opacity: 0;
    transform: translateX(120px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2,1.2,0.4,1);
}
.detonator-wrap.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}
.detonator-box {
    background: linear-gradient(160deg, #1a1a1a, #2d1010);
    border: 2px solid #ff4400;
    border-radius: 14px;
    padding: 14px 16px 16px;
    width: 160px;
    box-shadow: 0 0 24px rgba(255,68,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.detonator-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ff4400;
    font-family: monospace;
    text-align: center;
    border-bottom: 1px solid rgba(255,68,0,0.3);
    padding-bottom: 8px;
    width: 100%;
}
.detonator-count {
    font-size: 11px;
    font-weight: 700;
    color: #ffcc00;
    font-family: monospace;
    letter-spacing: 1px;
}
/* plunger rod + T handle */
.detonator-handle-wrap {
    position: relative;
    height: 64px;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.detonator-rod {
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #555, #888, #555);
    border-radius: 3px;
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.detonator-handle {
    position: relative;
    z-index: 2;
    background: linear-gradient(160deg, #cc2200, #ff4400);
    border-radius: 6px;
    width: 48px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(255,68,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    font-size: 12px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: grab;
    transition: top 0.15s ease;
    top: 0;
}
/* depressed state when detonating */
.detonator-handle.pressed {
    top: 40px;
    box-shadow: 0 1px 4px rgba(255,68,0,0.4);
}
.detonator-fire-btn {
    width: 100%;
    background: linear-gradient(135deg, #cc0000, #ff3300);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    font-family: monospace;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(255,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.detonator-fire-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 6px rgba(255,0,0,0.3);
}
.detonator-fire-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* flash overlay on detonation */
.c4-flash {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 999998;
    pointer-events: none;
    animation: c4-flash-anim 0.45s ease-out forwards;
}
@keyframes c4-flash-anim {
    0%   { opacity: 0.85; }
    100% { opacity: 0;    }
}

/* jagged blast hole burned into the post (clip-path set in JS) */
.c4-hole {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background:
        /* deep inner void */
        radial-gradient(
            circle at var(--hx, 50%) var(--hy, 50%),
            #121212 10%,
            rgba(18,18,18,0.97) 20%,
            rgba(18,18,18,0.7) 30%,
            transparent 52%
        ),
        /* inner ember glow ring */
        radial-gradient(
            circle at var(--hx, 50%) var(--hy, 50%),
            transparent 16%,
            rgba(220,80,0,0.6) 24%,
            rgba(180,50,0,0.35) 34%,
            transparent 48%
        ),
        /* charred edge + depth shadow */
        radial-gradient(
            circle at var(--hx, 50%) var(--hy, 50%),
            transparent 26%,
            rgba(30,8,0,0.8) 42%,
            rgba(15,4,0,0.5) 58%,
            transparent 74%
        ),
        /* subtle inset depth (darker bottom half of hole) */
        radial-gradient(
            ellipse at var(--hx, 50%) calc(var(--hy, 50%) + 6px),
            rgba(18,18,18,0.5) 8%,
            transparent 38%
        );
    animation: hole-appear 0.18s ease-out forwards;
}
@keyframes hole-appear {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* shockwave ring */
.c4-shockwave {
    position: fixed;
    border-radius: 50%;
    border: 4px solid rgba(255,160,0,0.8);
    pointer-events: none;
    z-index: 999997;
    animation: c4-shockwave-anim 0.55s ease-out forwards;
}
@keyframes c4-shockwave-anim {
    0%   { transform: translate(-50%,-50%) scale(0);   opacity:1; }
    100% { transform: translate(-50%,-50%) scale(8);   opacity:0; }
}




/* =============================================
   LASER MODE
   ============================================= */

/* Button style */
.chaos-btn-laser {
    background: linear-gradient(135deg, #1a0000, #380000) !important;
    border-color: #cc2200 !important;
    color: #ff6644 !important;
}
.chaos-btn-laser:hover {
    background: linear-gradient(135deg, #2a0000, #500000) !important;
    color: #ff8866 !important;
}
.chaos-btn-laser.active {
    background: linear-gradient(135deg, #400000, #800000) !important;
    border-color: #ff2200 !important;
    color: #ffbb99 !important;
    box-shadow: 0 0 14px rgba(255,40,0,0.6) !important;
    animation: laser-btn-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes laser-btn-pulse {
    from { box-shadow: 0 0 8px  rgba(255,40,0,0.4); }
    to   { box-shadow: 0 0 22px rgba(255,40,0,0.85); }
}

/* Body cursor */
body.mode-laser { cursor: crosshair !important; }

/* Gun widget */
#laserGun {
    position: fixed; top: 0; left: 0;
    z-index: 9999990;
    pointer-events: none; display: none;
    transform-origin: 18px 4px;
    transform: translate(-18px, -4px) rotate(var(--gun-angle, 0deg));
    transition: filter 0.05s;
}
#laserGun.firing {
    filter: drop-shadow(0 0 6px #ff3300) drop-shadow(0 0 12px #ff6600);
}

/* Heated flash on scorch target */
.laser-heated {
    animation: laser-heat 0.3s ease-out forwards;
}
@keyframes laser-heat {
    0%   { filter: brightness(2.2) saturate(3); }
    100% { filter: brightness(1)   saturate(1); }
}

/* =============================================
   HOLDABLE LASER CUTTER
   ============================================= */

/* ── The holdable laser device ─────────────── */
#laserCutter {
    position: fixed;
    z-index: 999997;
    cursor: grab;
    transform: translate(-16px, -36px);  /* center grip on cursor */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7));
    transition: filter 0.15s;
}

#laserCutter.lc-active {
    cursor: grabbing;
    filter: drop-shadow(0 0 18px rgba(255,40,0,0.6))
            drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}

/* Emitter (top) */
.lc-emitter {
    width: 22px;
    height: 10px;
    margin: 0 auto;
    background: linear-gradient(180deg, #555, #333);
    border-radius: 4px 4px 2px 2px;
    border: 1px solid #666;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-lens-ring {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #888;
    position: absolute;
    top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-lens-core {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff2200 0%, #cc0000 60%, #880000 100%);
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 4px 2px rgba(255,30,0,0.5);
    transition: box-shadow 0.15s;
}

#laserCutter.lc-active .lc-lens-core {
    background: radial-gradient(circle, #fff 0%, #ff4400 40%, #ff0000 80%);
    box-shadow: 0 0 14px 6px rgba(255,40,0,0.85),
                0 0 30px 10px rgba(255,20,0,0.4);
    animation: lc-lens-pulse 0.12s ease-in-out infinite alternate;
}

@keyframes lc-lens-pulse {
    from { box-shadow: 0 0 10px 5px rgba(255,40,0,0.75), 0 0 25px 8px rgba(255,20,0,0.35); }
    to   { box-shadow: 0 0 18px 8px rgba(255,60,0,0.95), 0 0 40px 14px rgba(255,30,0,0.5); }
}

/* Body */
.lc-body {
    width: 26px;
    height: 14px;
    margin: 0 auto;
    background: linear-gradient(180deg, #3a3a3a, #222);
    border-radius: 3px;
    border: 1px solid #444;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.lc-indicator {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #440000;
    border: 1px solid #333;
}

#laserCutter.lc-active .lc-indicator {
    background: #ff2200;
    box-shadow: 0 0 6px 2px rgba(255,30,0,0.7);
}

.lc-vent {
    width: 18px;
    height: 1px;
    background: #1a1a1a;
    border-radius: 1px;
}

/* Grip */
.lc-grip {
    width: 24px;
    height: 26px;
    margin: 0 auto;
    background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
    border-radius: 3px 3px 5px 5px;
    border: 1px solid #3a3a3a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 3px 0;
}

.lc-grip-line {
    width: 16px;
    height: 1px;
    background: #444;
    border-radius: 1px;
}

/* Pommel */
.lc-pommel {
    width: 28px;
    height: 5px;
    margin: 0 auto;
    background: linear-gradient(180deg, #444, #2a2a2a);
    border-radius: 0 0 3px 3px;
    border: 1px solid #555;
    border-top: none;
}

/* ── Cut wrapper ───────────────────────────── */
.lc-cut-wrapper {
    position: relative;
    overflow: visible;
}

/* ── Stay pieces ───────────────────────────── */
.lc-stay-piece {
    pointer-events: auto;
}

/* ── Burn line in the cut gap ──────────────── */
.lc-burn-line {
    position: absolute;
    height: 4px;
    z-index: 10;
    pointer-events: none;
    background: #121212;
    border-radius: 2px;
    overflow: visible;
}

.lc-burn-line::before {
    content: '';
    position: absolute;
    inset: -4px -2px;
    border-radius: 4px;
    background: transparent;
    box-shadow: 0 0 12px 4px rgba(255,40,0,0.7),
                0 0 24px 8px rgba(255,20,0,0.3);
    animation: lc-glow-fade 1.2s ease-out forwards;
}

.lc-burn-line::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: #ff2200;
    animation: lc-burn-color 1.2s ease-out forwards;
}

@keyframes lc-burn-color {
    0%   { background: #ff4400; }
    15%  { background: #ff2200; }
    40%  { background: #cc1100; }
    65%  { background: #551100; }
    85%  { background: #220800; }
    100% { background: #111; }
}

@keyframes lc-glow-fade {
    0%   { box-shadow: 0 0 14px 5px rgba(255,50,0,0.8), 0 0 28px 10px rgba(255,20,0,0.4); }
    30%  { box-shadow: 0 0 8px 3px rgba(255,30,0,0.5), 0 0 16px 6px rgba(200,10,0,0.2); }
    70%  { box-shadow: 0 0 3px 1px rgba(180,20,0,0.2), 0 0 6px 2px rgba(100,5,0,0.1); }
    100% { box-shadow: 0 0 1px 0px rgba(40,10,0,0.15); }
}

/* Mode cursor */
body.mode-laser { cursor: default !important; }
body.mode-laser *:not(#laserCutter):not(#laserCutter *) {
    cursor: default !important;
}

/* ── Laser falling sliver (cut-out piece that tumbles to ground) ── */
.lc-fall-piece {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 99996 !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    filter: drop-shadow(0 0 5px rgba(255,90,0,0.95))
            drop-shadow(0 0 12px rgba(255,40,0,0.55)) !important;
    transition: none !important;
}

/* ── Permanent burn scar glow layers fade out while char groove stays ── */
@keyframes lc-scar-glow-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* -- REC floating action button -- */
#rec-fab {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    right: 14px;
    z-index: 999997;
    background: #ff0040;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 2px 16px rgba(255, 0, 64, 0.55);
    transition: background 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#rec-fab i { font-size: 9px; }
#rec-fab.rec-active {
    background: #222;
    animation: rec-pulse 1.2s ease infinite;
}
@keyframes rec-pulse {
    0%, 100% { box-shadow: 0 2px 16px rgba(255, 0, 64, 0.55); }
    50%       { box-shadow: 0 2px 32px rgba(255, 0, 64, 1);    }
}