html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#0b0b0d; }
.presenter-root { position:fixed; inset:0; display:flex; flex-direction:column; background:#0b0b0d; color:#f2f2f5; }
.presenter-bar {
    flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:8px 12px; background:rgba(20,20,24,0.95); border-bottom:1px solid rgba(255,255,255,0.08);
    z-index:50;
}
.presenter-exit {
    display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:8px;
    background:rgba(255,255,255,0.08); color:#f2f2f5; text-decoration:none; font-size:0.85rem;
    flex:0 0 auto; white-space:nowrap;
}
.presenter-exit:hover { background:rgba(255,255,255,0.16); }
.presenter-title { font-size:0.9rem; font-weight:600; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0.9; }
.presenter-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
.presenter-controls select,
.presenter-controls button {
    background:rgba(255,255,255,0.08); color:#f2f2f5; border:1px solid rgba(255,255,255,0.15);
    border-radius:8px; padding:6px 10px; font-size:0.82rem; cursor:pointer;
}
.presenter-controls select:hover, .presenter-controls button:hover { background:rgba(255,255,255,0.16); }
.presenter-layers-wrap { position:relative; }
.presenter-layers-panel {
    position:absolute; top:calc(100% + 6px); right:0; min-width:200px; max-width:280px;
    background:#1a1a1e; border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:8px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5); z-index:60; display:none;
}
.presenter-layers-panel.open { display:block; }
.presenter-layer-row {
    display:flex; align-items:center; gap:8px; padding:5px 4px; font-size:0.82rem; border-radius:6px;
}
.presenter-layer-row:hover { background:rgba(255,255,255,0.06); }
.presenter-layer-row label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.presenter-stage {
    flex:1 1 auto; position:relative; display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding:16px; box-sizing:border-box; min-height:0;
}
.presenter-frame { position:relative; }
#presenter-image { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
#presenter-canvas { position:absolute; inset:0; pointer-events:none; }
#presenter-pois-layer { position:absolute; inset:0; pointer-events:none; }
.map-poi-marker {
    position:absolute; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer;
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    font-size:18px; border-radius:50%; background:rgba(20,20,20,0.75); border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.4); user-select:none;
}
.map-poi-marker.on-cooldown { box-shadow:0 0 0 3px #e74c3c, 0 2px 6px rgba(0,0,0,0.4); }
.map-poi-marker.scout-covered {
    background: rgba(88, 101, 242, 0.4);
}
.map-poi-marker.scout-mine {
    background: rgba(241, 196, 15, 0.5);
}
.map-poi-marker.scout-not-here {
    background: rgba(231, 76, 60, 0.45);
}
.map-poi-marker.spawn-reported {
    box-shadow: 0 0 0 3px #e74c3c, 0 2px 6px rgba(0,0,0,0.4);
    z-index: 12;
}
.map-poi-marker.spawn-reported.scout-covered {
    background: rgba(88, 101, 242, 0.48);
}
.map-poi-marker.spawn-reported.scout-mine {
    background: rgba(241, 196, 15, 0.55);
}
.map-poi-marker.is-pending {
    opacity: 0.45;
    filter: grayscale(0.85);
    box-shadow: 0 0 0 2px rgba(140, 140, 140, 0.7), 0 2px 6px rgba(0,0,0,0.35);
}
.map-poi-cooldown-badge {
    position:absolute; top:100%; left:50%; transform:translate(-50%,4px);
    background:#e74c3c; color:#fff; font-size:11px; font-weight:600; line-height:1;
    padding:2px 6px; border-radius:10px; white-space:nowrap; pointer-events:none;
    box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.poi-popover {
    position:fixed; width:min(320px, calc(100vw - 24px)); background:var(--card-bg, #1a1a1e);
    color:var(--text-primary, #f2f2f5); border:1px solid var(--border-color, rgba(255,255,255,0.15));
    border-radius:10px; padding:14px 16px; box-shadow:0 12px 32px rgba(0,0,0,0.5); z-index:80;
}
.poi-popover h3 { margin:0 0 6px; font-size:1rem; }
.poi-popover p { margin:0 0 8px; font-size:0.85rem; line-height:1.4; white-space:pre-wrap; }
.poi-popover .poi-popover-meta { font-size:0.78rem; color:var(--text-secondary, #9a9aa5); margin:0 0 8px; }
.poi-popover .poi-popover-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.poi-popover .poi-popover-actions .btn { padding:5px 10px; font-size:0.8rem; }
.poi-custom-cooldown-row {
    display:flex; gap:6px; align-items:center; margin-top:2px;
}
.poi-custom-cooldown-row input[type="number"] {
    flex:1 1 0; min-width:0; padding:5px 6px; border-radius:6px;
    border:1px solid var(--border-color, #3a3a4a); background:var(--card-bg, #1e1e2e);
    color:var(--text-primary, #e8e8f0); font-size:0.78rem;
}
.poi-custom-cooldown-row .btn { flex:0 0 auto; padding:5px 10px; font-size:0.78rem; }
.poi-popover-close {
    position:absolute; top:6px; right:8px; background:none; border:none; font-size:1.1rem;
    cursor:pointer; color:var(--text-secondary, #9a9aa5); display:none;
}
.poi-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:90;
    display:none; align-items:flex-end; justify-content:center;
}
.poi-modal-overlay.open { display:flex; }
.poi-modal {
    width:100%; max-width:480px; max-height:80vh; overflow-y:auto; background:var(--card-bg, #1a1a1e);
    color:var(--text-primary, #f2f2f5); border-radius:16px 16px 0 0; padding:18px 20px 24px;
    position:relative; box-shadow:0 -8px 32px rgba(0,0,0,0.5);
}
.poi-modal h3 { margin:0 0 8px; font-size:1.1rem; }
.poi-modal p { margin:0 0 10px; font-size:0.9rem; line-height:1.45; white-space:pre-wrap; }
.poi-modal .poi-popover-meta { font-size:0.8rem; color:var(--text-secondary, #9a9aa5); margin:0 0 10px; }
.poi-modal .poi-popover-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.poi-modal-close {
    position:absolute; top:10px; right:12px; background:none; border:none; font-size:1.4rem;
    cursor:pointer; color:var(--text-secondary, #9a9aa5);
}
@media (max-width: 768px) {
    .presenter-title { display:none; }
    .presenter-bar { padding:6px 8px; }
}