{"version":3,"file":"styles.cjs","sources":["../../src/debug/styles.ts"],"sourcesContent":["/**\n * The overlay's one static stylesheet, injected into the shadow root.\n *\n * Scope discipline: **every rule targets a `.cds-*` class or an explicit\n * `#id::pseudo-element`.** A bare `button { … }` here would silently restyle every\n * inline-styled control in the overlay, since the shadow root is our whole world.\n *\n * Division of labour with the rest of the overlay: geometry (`top`/`left`/`width`)\n * stays in JS, because it depends on the panel-position preference and the compact\n * breakpoint — runtime state a media query cannot read, and inline values a\n * stylesheet cannot override without `!important`. What lives here is everything a\n * media query *can* own: pointer ergonomics, `touch-action`, scroll behaviour, and\n * the slider pseudo-elements that inline styles can never reach.\n */\n\nlet injected = false;\n\n// Thumb sits centered on the track: (track - thumb) / 2.\nconst CSS = `\n.cds-surface, .cds-surface * { touch-action: manipulation; }\n\n/* The logo carries a long-press gesture; without this, holding it raises the\n   selection callout / context menu instead. */\n#debug-logo-container {\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    user-select: none;\n}\n\n/* Drag surfaces and sliders claim the gesture outright — otherwise a horizontal\n   drag on the latency slider scrolls the menu instead of moving the thumb. */\n[data-drag], .resize-handle, .cds-range { touch-action: none; }\n\n.cds-scroll {\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    overscroll-behavior: contain;\n    scrollbar-width: thin;\n    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;\n}\n.cds-scroll::-webkit-scrollbar { width: 8px; height: 8px; }\n.cds-scroll::-webkit-scrollbar-track { background: transparent; }\n.cds-scroll::-webkit-scrollbar-thumb {\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 4px;\n}\n\n/* Network-simulation sliders. The gradient fill is re-injected per input event\n   (see panel.ts); everything static lives here so a coarse-pointer override can\n   win by source order instead of !important. Height lives here rather than\n   inline for the same reason. */\n.cds-range { height: 20px; }\n\n#latency-slider::-webkit-slider-runnable-track,\n#jitter-slider::-webkit-slider-runnable-track {\n    height: 6px;\n    border-radius: 3px;\n    border: none;\n}\n#latency-slider::-moz-range-track,\n#jitter-slider::-moz-range-track {\n    height: 6px;\n    border-radius: 3px;\n    border: none;\n}\n#latency-slider::-webkit-slider-thumb,\n#jitter-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 16px;\n    height: 16px;\n    margin-top: -5px;\n    border-radius: 50%;\n    border: 2px solid #888;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    transition: transform 0.1s ease, box-shadow 0.1s ease;\n}\n#latency-slider::-webkit-slider-thumb:hover,\n#jitter-slider::-webkit-slider-thumb:hover {\n    transform: scale(1.1);\n    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);\n}\n#latency-slider::-moz-range-thumb,\n#jitter-slider::-moz-range-thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    border: 2px solid #888;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    transition: transform 0.1s ease;\n}\n#latency-slider::-moz-range-thumb:hover,\n#jitter-slider::-moz-range-thumb:hover { transform: scale(1.1); }\n\n@keyframes debug-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }\n\n@media (pointer: coarse) {\n    /* min-* composes with the inline width/height each control already carries —\n       nothing inline sets min-*, so no specificity fight. */\n    .cds-hit { min-width: 44px; min-height: 44px; }\n\n    /* Height-only, for controls in a fixed-width row that can't afford 44px each\n       (the five Predict mode pills would wrap out of a 240px card). */\n    .cds-hit-y { min-height: 44px; }\n\n    .cds-range { height: 32px; }\n\n    #latency-slider::-webkit-slider-runnable-track,\n    #jitter-slider::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; }\n    #latency-slider::-moz-range-track,\n    #jitter-slider::-moz-range-track { height: 10px; border-radius: 5px; }\n\n    #latency-slider::-webkit-slider-thumb,\n    #jitter-slider::-webkit-slider-thumb {\n        width: 24px;\n        height: 24px;\n        margin-top: -7px;\n    }\n    #latency-slider::-moz-range-thumb,\n    #jitter-slider::-moz-range-thumb { width: 24px; height: 24px; }\n}\n`;\n\n/** Inject the base sheet once. Called from `getDebugRoot()`. */\nexport function injectBaseStyles(root: ShadowRoot): void {\n    if (injected) { return; }\n    injected = true;\n    const style = document.createElement(\"style\");\n    style.id = \"colyseus-debug-base-styles\";\n    style.textContent = CSS;\n    root.appendChild(style);\n}\n"],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;;AAaG;AAEH,IAAI,QAAQ,GAAG,KAAK;AAEpB;AACA,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GX;AAED;AACM,SAAU,gBAAgB,CAAC,IAAgB,EAAA;IAC7C,IAAI,QAAQ,EAAE;QAAE;IAAQ;IACxB,QAAQ,GAAG,IAAI;IACf,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,IAAA,KAAK,CAAC,EAAE,GAAG,4BAA4B;AACvC,IAAA,KAAK,CAAC,WAAW,GAAG,GAAG;AACvB,IAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B;;;;"}