atmos/os_lib/web_engine/

draw_helpers.rs

use crate::os_lib::css::parse_color;
pub(crate) use super::css_filters::*;
pub(crate) use super::bilinear::sample_bilinear_rgba;

/// 計算量: **O(W + H)** — 枠線 4 辺の長さに比例（太さは定数倍）。
/// 面積ではないので軽い。実測 0〜1 tick。
pub(super) fn draw_individual_borders(
    screen: &crate::kernel::draw::Screen,
    mut x0: i32,
    mut y0: i32,
    mut x1: i32,
    mut y1: i32,
    el: &super::RenderElement,
    is_hovered: bool,
    is_focused: bool,
    is_active: bool,
) {
    // Apply client insets if present (top, right, bottom, left)
    if let Some((top, right, bottom, left)) = el.client_insets {
        x0 += left;
        y0 += top;
        x1 -= right;
        y1 -= bottom;
        // Ensure coordinates remain valid
        if x0 > x1 || y0 > y1 {
            return;
        }
    }
    if x0 >= x1 || y0 >= y1 {
        return;
    }

    // 【2026-08-05 発見・修正】`border-color: transparent`（アルファ 0）は
    // **何も描かない**。
    //
    // `draw_pixel` はアルファ 0x00 を互換上「不透明」として扱う妥協があるため
    // （下位のほぼ全ての呼び出しがアルファを設定せず 0 のまま渡すので、
    //  仕様どおり透明にすると画面が消える）、透明なボーダーが
    // **不透明な黒**として描かれていた。
    //
    // 実測: `#apps` の一覧にある 20×20 の `<i>` 要素や、
    // セクション見出しの周りに黒い枠（☐ / 角丸の輪郭）が出ていた。
    // 実サイトには存在しない。
    //
    // 幅はレイアウトに残す（CSS では透明ボーダーも場所を占める）。
    // 描画だけを止める。
    let all_transparent = [
        el.border_top_color,
        el.border_right_color,
        el.border_bottom_color,
        el.border_left_color,
        el.border_color,
    ]
    .iter()
    .flatten()
    .all(|c| (c >> 24) & 0xFF == 0);
    let has_any_color = [
        el.border_top_color,
        el.border_right_color,
        el.border_bottom_color,
        el.border_left_color,
        el.border_color,
    ]
    .iter()
    .any(|c| c.is_some());
    if has_any_color && all_transparent {
        return;
    }

    // Top
    if el.border_top_width > 0 && !el.border_top_style.is_none() {
        let color = if is_active {
            el.active_border_color
                .or(el.border_top_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_hovered {
            el.hover_border_color
                .or(el.border_top_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_focused {
            el.focus_border_color
                .or(el.border_top_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else {
            el.border_top_color.or(el.border_color).unwrap_or(el.color)
        };
        let t_w = el.border_top_width;
        if el.border_top_style == super::BorderStyle::Dashed {
            let dash = 6;
            let gap = 4;
            let mut x = x0;
            while x < x1 {
                let end = (x + dash).min(x1);
                screen.boxfill(
                    x as u32,
                    y0 as u32,
                    (end - 1).max(x) as u32,
                    (y0 + t_w - 1).max(y0) as u32,
                    crate::kernel::draw::Color(color),
                );
                x += dash + gap;
            }
        } else {
            screen.boxfill(
                x0 as u32,
                y0 as u32,
                (x1 - 1).max(x0) as u32,
                (y0 + t_w - 1).max(y0) as u32,
                crate::kernel::draw::Color(color),
            );
        }
    }

    // Bottom
    if el.border_bottom_width > 0 && !el.border_bottom_style.is_none() {
        let color = if is_active {
            el.active_border_color
                .or(el.border_bottom_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_hovered {
            el.hover_border_color
                .or(el.border_bottom_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_focused {
            el.focus_border_color
                .or(el.border_bottom_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else {
            el.border_bottom_color
                .or(el.border_color)
                .unwrap_or(el.color)
        };
        let b_w = el.border_bottom_width;
        if el.border_bottom_style == super::BorderStyle::Dashed {
            let dash = 6;
            let gap = 4;
            let mut x = x0;
            while x < x1 {
                let end = (x + dash).min(x1);
                screen.boxfill(
                    x as u32,
                    (y1 - b_w) as u32,
                    (end - 1).max(x) as u32,
                    (y1 - 1).max(y1 - b_w) as u32,
                    crate::kernel::draw::Color(color),
                );
                x += dash + gap;
            }
        } else {
            screen.boxfill(
                x0 as u32,
                (y1 - b_w) as u32,
                (x1 - 1).max(x0) as u32,
                (y1 - 1).max(y1 - b_w) as u32,
                crate::kernel::draw::Color(color),
            );
        }
    }

    // Left
    if el.border_left_width > 0 && !el.border_left_style.is_none() {
        let color = if is_active {
            el.active_border_color
                .or(el.border_left_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_hovered {
            el.hover_border_color
                .or(el.border_left_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_focused {
            el.focus_border_color
                .or(el.border_left_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else {
            el.border_left_color.or(el.border_color).unwrap_or(el.color)
        };
        let l_w = el.border_left_width;
        if el.border_left_style == super::BorderStyle::Dashed {
            let dash = 6;
            let gap = 4;
            let mut y = y0;
            while y < y1 {
                let end = (y + dash).min(y1);
                screen.boxfill(
                    x0 as u32,
                    y as u32,
                    (x0 + l_w - 1).max(x0) as u32,
                    (end - 1).max(y) as u32,
                    crate::kernel::draw::Color(color),
                );
                y += dash + gap;
            }
        } else {
            screen.boxfill(
                x0 as u32,
                y0 as u32,
                (x0 + l_w - 1).max(x0) as u32,
                (y1 - 1).max(y0) as u32,
                crate::kernel::draw::Color(color),
            );
        }
    }

    // Right
    if el.border_right_width > 0 && !el.border_right_style.is_none() {
        let color = if is_active {
            el.active_border_color
                .or(el.border_right_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_hovered {
            el.hover_border_color
                .or(el.border_right_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else if is_focused {
            el.focus_border_color
                .or(el.border_right_color)
                .or(el.border_color)
                .unwrap_or(el.color)
        } else {
            el.border_right_color
                .or(el.border_color)
                .unwrap_or(el.color)
        };
        let r_w = el.border_right_width;
        if el.border_right_style == super::BorderStyle::Dashed {
            let dash = 6;
            let gap = 4;
            let mut y = y0;
            while y < y1 {
                let end = (y + dash).min(y1);
                screen.boxfill(
                    (x1 - r_w) as u32,
                    y as u32,
                    (x1 - 1).max(x1 - r_w) as u32,
                    (end - 1).max(y) as u32,
                    crate::kernel::draw::Color(color),
                );
                y += dash + gap;
            }
        } else {
            screen.boxfill(
                (x1 - r_w) as u32,
                y0 as u32,
                (x1 - 1).max(x1 - r_w) as u32,
                (y1 - 1).max(y0) as u32,
                crate::kernel::draw::Color(color),
            );
        }
    }
}

pub fn draw_border(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    x1: i32,
    y1: i32,
    color_val: u32,
) {
    if x0 >= x1 || y0 >= y1 {
        return;
    }
    let color = crate::kernel::draw::Color(color_val);
    let ux0 = x0 as u32;
    let uy0 = y0 as u32;
    let ux1 = (x1 - 1) as u32;
    let uy1 = (y1 - 1) as u32;

    // 上辺
    screen.boxfill(ux0, uy0, ux1, uy0, color);
    if y1 - y0 > 1 {
        // 下辺
        screen.boxfill(ux0, uy1, ux1, uy1, color);
    }
    if y1 - y0 > 2 {
        // 左辺（四隅重複を除外）
        screen.boxfill(ux0, uy0 + 1, ux0, uy1 - 1, color);
        if x1 - x0 > 1 {
            // 右辺（四隅重複を除外）
            screen.boxfill(ux1, uy0 + 1, ux1, uy1 - 1, color);
        }
    }
}

pub(super) fn draw_border_with_style(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    x1: i32,
    y1: i32,
    color_val: u32,
    style: super::BorderStyle,
) {
    if style.is_none() {
        return;
    }
    if style == super::BorderStyle::Dashed {
        draw_dashed_border(screen, x0, y0, x1, y1, color_val);
        return;
    }
    draw_border(screen, x0, y0, x1, y1, color_val);
}

fn draw_dashed_border(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    x1: i32,
    y1: i32,
    color_val: u32,
) {
    if x0 >= x1 || y0 >= y1 {
        return;
    }
    let color = crate::kernel::draw::Color(color_val);
    let dash = 6;
    let gap = 4;
    let mut x = x0;
    while x < x1 {
        let end = (x + dash).min(x1);
        screen.boxfill(
            x as u32,
            y0 as u32,
            (end - 1).max(x) as u32,
            y0 as u32,
            color,
        );
        if y1 - y0 > 1 {
            screen.boxfill(
                x as u32,
                (y1 - 1) as u32,
                (end - 1).max(x) as u32,
                (y1 - 1) as u32,
                color,
            );
        }
        x += dash + gap;
    }
    let mut y = y0;
    while y < y1 {
        let end = (y + dash).min(y1);
        screen.boxfill(
            x0 as u32,
            y as u32,
            x0 as u32,
            (end - 1).max(y) as u32,
            color,
        );
        if x1 - x0 > 1 {
            screen.boxfill(
                (x1 - 1) as u32,
                y as u32,
                (x1 - 1) as u32,
                (end - 1).max(y) as u32,
                color,
            );
        }
        y += dash + gap;
    }
}

pub(super) fn extract_border_color(
    styled: &crate::os_lib::css::StyledNode<'_>,
    default_color: u32,
) -> Option<u32> {
    for key in [
        "border-color",
        "border-top-color",
        "border-right-color",
        "border-bottom-color",
        "border-left-color",
    ] {
        if let Some(v) = styled.value(key) {
            if let Some(c) = parse_color(&v) {
                return Some(c);
            }
        }
    }

    if let Some(v) = styled.value("border") {
        for token in v.split_whitespace().rev() {
            if let Some(c) = parse_color(token) {
                return Some(c);
            }
        }
    }

    Some(default_color)
}

pub(super) fn extract_border_style(styled: &crate::os_lib::css::StyledNode<'_>) -> super::BorderStyle {
    if let Some(v) = styled.value("border-style") {
        let style = v.trim();
        if !style.is_empty() {
            return super::BorderStyle::parse(style);
        }
    }

    if let Some(v) = styled.value("border") {
        for token in v.split_whitespace() {
            let token_l = token.trim().to_lowercase();
            if matches!(
                token_l.as_str(),
                "none" | "solid" | "dashed" | "dotted" | "double"
            ) {
                return super::BorderStyle::parse(&token_l);
            }
        }
    }

    super::BorderStyle::Solid
}

/// CSS `transform: rotate(Ndeg)` 向け — 回転した塗りつぶし矩形を描く。
/// cx/cy は回転中心（スクリーン座標）、w/h は元の矩形サイズ、angle_deg は時計回り度数。
pub fn draw_rotated_rect_filled(
    screen: &crate::kernel::draw::Screen,
    cx: i32,
    cy: i32,
    w: i32,
    h: i32,
    angle_deg: f32,
    color: u32,
) {
    if w <= 0 || h <= 0 {
        return;
    }
    let rad = angle_deg * core::f32::consts::PI / 180.0;
    let cos_a = libm::cosf(rad);
    let sin_a = libm::sinf(rad);
    // 回転後バウンディングボックス
    let hw = w as f32 / 2.0;
    let hh = h as f32 / 2.0;
    let bound_w = libm::ceilf(libm::fabsf(hw * cos_a) + libm::fabsf(hh * sin_a)) as i32;
    let bound_h = libm::ceilf(libm::fabsf(hw * sin_a) + libm::fabsf(hh * cos_a)) as i32;
    let draw_color = crate::kernel::draw::Color(color | 0xFF000000);
    for oy in -bound_h..=bound_h {
        for ox in -bound_w..=bound_w {
            // 逆回転でソース座標を求める
            let sx = ox as f32 * cos_a + oy as f32 * sin_a;
            let sy = -ox as f32 * sin_a + oy as f32 * cos_a;
            if sx >= -hw && sx <= hw && sy >= -hh && sy <= hh {
                let px = cx + ox;
                let py = cy + oy;
                if px >= 0 && py >= 0 {
                    screen.draw_pixel(px as u32, py as u32, draw_color);
                }
            }
        }
    }
}

/// CSS `transform: skewX(deg) / skewY(deg)` 向け — せん断変形した塗りつぶし矩形を描く。
pub fn draw_skewed_rect_filled(
    screen: &crate::kernel::draw::Screen,
    cx: i32,
    cy: i32,
    w: i32,
    h: i32,
    skew_x_deg: f32,
    skew_y_deg: f32,
    color: u32,
) {
    if w <= 0 || h <= 0 {
        return;
    }
    let rad_x = skew_x_deg * core::f32::consts::PI / 180.0;
    let rad_y = skew_y_deg * core::f32::consts::PI / 180.0;
    let tan_x = libm::tanf(rad_x);
    let tan_y = libm::tanf(rad_y);

    let hw = w as f32 / 2.0;
    let hh = h as f32 / 2.0;

    let det = 1.0 - tan_x * tan_y;
    if det.abs() < 1e-6 {
        return;
    }

    let bound_w = libm::ceilf(hw + hh * libm::fabsf(tan_x)) as i32;
    let bound_h = libm::ceilf(hh + hw * libm::fabsf(tan_y)) as i32;
    let draw_color = crate::kernel::draw::Color(color | 0xFF000000);

    for oy in -bound_h..=bound_h {
        for ox in -bound_w..=bound_w {
            let sx = (ox as f32 - oy as f32 * tan_x) / det;
            let sy = (oy as f32 - ox as f32 * tan_y) / det;
            if sx >= -hw && sx <= hw && sy >= -hh && sy <= hh {
                let px = cx + ox;
                let py = cy + oy;
                if px >= 0 && py >= 0 {
                    screen.draw_pixel(px as u32, py as u32, draw_color);
                }
            }
        }
    }
}

pub use super::clip_path::*;

pub fn draw_gradation(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    w: i32,
    h: i32,
    c1: u32,
    c2: u32,
) {
    if w <= 0 || h <= 0 {
        return;
    }
    let x_end = (x0 + w - 1).max(x0) as u32;
    let r1 = ((c1 >> 16) & 0xFF) as i32;
    let g1 = ((c1 >> 8) & 0xFF) as i32;
    let b1 = (c1 & 0xFF) as i32;

    let r2 = ((c2 >> 16) & 0xFF) as i32;
    let g2 = ((c2 >> 8) & 0xFF) as i32;
    let b2 = (c2 & 0xFF) as i32;

    let denom = (h - 1).max(1);
    for dy in 0..h {
        let py = (y0 + dy) as u32;
        let r = ((r1 * (denom - dy) + r2 * dy) / denom) as u32;
        let g = ((g1 * (denom - dy) + g2 * dy) / denom) as u32;
        let b = ((b1 * (denom - dy) + b2 * dy) / denom) as u32;
        let c = 0xFF000000 | (r << 16) | (g << 8) | b;
        screen.boxfill(
            x0 as u32,
            py,
            x_end,
            py,
            crate::kernel::draw::Color(c),
        );
    }
}

/// 計算量: **O(W×H)**（LUT 化後）— W,H は塗る矩形のサイズ。
///
/// 内訳:
/// - LUT 構築: **O(L × S)** — L = `lut_size(射影長)`（軸方向 1px に 1 段）、
///   S = ストップ数。`sample_gradient_stops` を L 回呼ぶ
/// - 塗り: 軸平行（0/180deg）なら **行ごとに `boxfill` 1 回** = O(H) 回の呼び出し。
///   斜めなら 1 ピクセルずつ **O(W×H)**
///
/// 【2026-07-31 改善】以前は 1 ピクセルごとに `sample_gradient_stops`
/// （ストップ配列の線形走査＋4 チャンネル浮動小数補間）を呼んでおり
/// **O(W×H×S)** だった。924×600 で 55 万回。実測で描画 1 フレームの
/// 37%（112 tick）を占めていた → LUT 化で 62〜70 tick へ。
/// 詳細は `spec/gradient_raster.md`。
pub fn draw_linear_gradient(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    w: i32,
    h: i32,
    grad: &super::LinearGradient,
) {
    if w <= 0 || h <= 0 || grad.stops.is_empty() {
        return;
    }

    let angle_rad = grad.angle_deg * core::f32::consts::PI / 180.0;
    // 0deg = to top (0, -1), 90deg = to right (1, 0)
    let dx = libm::sinf(angle_rad);
    let dy = -libm::cosf(angle_rad);

    // ボックスの4頂点 (相対座標)
    let corners = [
        (0.0, 0.0),
        (w as f32, 0.0),
        (0.0, h as f32),
        (w as f32, h as f32),
    ];

    let mut min_proj = f32::MAX;
    let mut max_proj = f32::MIN;
    for &(cx, cy) in &corners {
        let p = cx * dx + cy * dy;
        if p < min_proj { min_proj = p; }
        if p > max_proj { max_proj = p; }
    }
    
    let length = max_proj - min_proj;
    let x_end = (x0 + w - 1).max(x0) as u32;
    if length <= 0.0 {
        let c = grad.stops[0].color;
        let y_end = (y0 + h - 1).max(y0) as u32;
        screen.boxfill(x0 as u32, y0 as u32, x_end, y_end, crate::kernel::draw::Color(c));
        return;
    }

    // 【2026-07-31 性能修正】仕様は `spec/gradient_raster.md`。
    //
    // 従来は 1 ピクセルごとに `sample_gradient_stops`（ストップ配列の線形走査＋
    // 4 チャンネルの浮動小数補間）を呼んでいた。924×600 なら 55 万回。
    // 実測で描画 1 フレーム 300 tick のうち 112 tick（37%）がここだった。
    //
    // `t` から色への写像はピクセル位置に依存しないので、軸方向の長さぶんの
    // LUT を先に作る。呼び出しは `length` 回で済む（G-1: 軸方向 1 ピクセルに
    // 1 段を割り当てるので、軸平行なら従来と厳密に一致する）。
    use super::gradient_lut::{classify_axis, lut_index, lut_size, Axis};
    let lut_n = lut_size(length);
    let mut lut: alloc::vec::Vec<u32> = alloc::vec::Vec::with_capacity(lut_n);
    for i in 0..lut_n {
        let t = if lut_n <= 1 {
            0.0
        } else {
            i as f32 / (lut_n - 1) as f32
        };
        lut.push(sample_gradient_stops(&grad.stops, t));
    }

    // 軸平行なら 1 行（または行内の各列）が単色になる。
    // 縦グラデーションは行ごとに `boxfill` 1 回で済む。
    let axis = classify_axis(dx, dy);

    if axis == Axis::Horizontal {
        // 水平グラデーション: dy == 0 のため全行で列ごとの色は共通。
        // 1 行分の色配列を事前計算し、各行へスキャンライン直列書き込みを行う。
        let mut row_colors = alloc::vec::Vec::with_capacity(w as usize);
        for x in 0..w {
            let p_x = (x as f32) * dx;
            let t = (p_x - min_proj) / length;
            row_colors.push(lut[lut_index(t, lut_n)]);
        }
        for y in 0..h {
            let py = y0 + y;
            screen.draw_scanline_colors(x0, py, &row_colors);
        }
        return;
    }

    let mut row_colors = alloc::vec![0u32; w as usize];
    for y in 0..h {
        let py = (y0 + y) as u32;
        let p_y = (y as f32) * dy;

        if axis == Axis::Vertical {
            // この行は単色。boxfill は不透明なら一括DMA/fill、半透明なら boxfill_alpha（スキャンライン直接合成）
            // に自動分岐するため、1行の boxfill 呼び出しで高速に描画できる。
            let t = (p_y - min_proj) / length;
            let color = lut[lut_index(t, lut_n)];
            screen.boxfill(
                x0 as u32,
                py,
                x_end,
                py,
                crate::kernel::draw::Color(color),
            );
            continue;
        }

        // 斜めグラデーション: 行バッファを埋めてスキャンライン直列転送
        for x in 0..w {
            let p_x = (x as f32) * dx;
            let p = p_x + p_y;
            let t = (p - min_proj) / length;
            row_colors[x as usize] = lut[lut_index(t, lut_n)];
        }
        screen.draw_scanline_colors(x0, py as i32, &row_colors);
    }
}

/// `stops`（`position` 昇順ソート済み前提）から、位置 `t`（0.0-1.0）における補間色を得る。
/// `draw_linear_gradient` の同ロジックを N ストップの `conic-gradient` でも再利用するために
/// 独立関数として切り出した。
/// 計算量: **O(S)** — S はストップ数（線形走査）。
/// 4 チャンネルの浮動小数補間を伴うため定数倍も小さくない。
/// **毎ピクセルで呼ばない**こと（呼び出し側で LUT 化する）。
pub(crate) fn sample_gradient_stops(stops: &[super::GradientStop], t: f32) -> u32 {
    if stops.is_empty() {
        return 0;
    }
    if t <= stops[0].position {
        return stops[0].color;
    }
    let last = stops.last().unwrap_or(&stops[0]);
    if t >= last.position {
        return last.color;
    }
    for i in 0..stops.len() - 1 {
        let s1 = &stops[i];
        let s2 = &stops[i + 1];
        if t >= s1.position && t <= s2.position {
            let range = s2.position - s1.position;
            let local_t = if range > 0.0 { (t - s1.position) / range } else { 0.0 };
            let a1 = ((s1.color >> 24) & 0xFF) as f32;
            let r1 = ((s1.color >> 16) & 0xFF) as f32;
            let g1 = ((s1.color >> 8) & 0xFF) as f32;
            let b1 = (s1.color & 0xFF) as f32;
            let a2 = ((s2.color >> 24) & 0xFF) as f32;
            let r2 = ((s2.color >> 16) & 0xFF) as f32;
            let g2 = ((s2.color >> 8) & 0xFF) as f32;
            let b2 = (s2.color & 0xFF) as f32;
            let a = ((1.0 - local_t) * a1 + local_t * a2) as u32;
            let r = ((1.0 - local_t) * r1 + local_t * r2) as u32;
            let g = ((1.0 - local_t) * g1 + local_t * g2) as u32;
            let b = ((1.0 - local_t) * b1 + local_t * b2) as u32;
            return (a << 24) | (r << 16) | (g << 8) | b;
        }
    }
    last.color
}

/// `conic-gradient(c1, c2, ..., cN)` — N色ストップを角度方向へ（12時方向起点、時計回り）
/// 補間して描画する。以前は `kernel::draw::Screen::draw_conic_gradient_rect` が2色固定
/// だったため3色目以降が失われていた。ここでは `draw_linear_gradient` と同じ補間ロジック
/// （`sample_gradient_stops`）を角度ベースの `t` に適用する。
pub fn draw_conic_gradient(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    w: i32,
    h: i32,
    stops: &[super::GradientStop],
) {
    if w <= 0 || h <= 0 || stops.is_empty() {
        return;
    }
    let cx = w as f32 / 2.0;
    let cy = h as f32 / 2.0;
    const PI: f32 = core::f32::consts::PI;
    for dy in 0..h {
        for dx in 0..w {
            let px = dx as f32 - cx;
            let py = dy as f32 - cy;
            // atan2(px, -py): 真上(0,-1)方向を角度0とし、時計回りに増加させる
            // （kernel::draw::draw_conic_gradient_rect と同じ角度基準）。
            let mut angle = libm::atan2f(px, -py);
            if angle < 0.0 {
                angle += 2.0 * PI;
            }
            let t = angle / (2.0 * PI);
            let color = sample_gradient_stops(stops, t);
            screen.draw_pixel_alpha(
                (x0 + dx) as u32,
                (y0 + dy) as u32,
                crate::kernel::draw::Color(color),
                255,
            );
        }
    }
}

pub fn draw_radial_gradient(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    w: i32,
    h: i32,
    grad: &super::RadialGradient,
) {
    if w <= 0 || h <= 0 || grad.stops.is_empty() {
        return;
    }

    let cx = (w as f32) * grad.pos_x;
    let cy = (h as f32) * grad.pos_y;
    
    // 最大半径 (四隅のうち最も遠い距離)
    let max_rx = if grad.pos_x > 0.5 { cx } else { (w as f32) - cx };
    let max_ry = if grad.pos_y > 0.5 { cy } else { (h as f32) - cy };
    
    let (r_x, r_y) = match grad.shape {
        super::RadialShape::Circle => {
            let r = libm::sqrtf(max_rx * max_rx + max_ry * max_ry);
            (r, r)
        },
        super::RadialShape::Ellipse => {
            (max_rx, max_ry)
        }
    };
    
    if r_x <= 0.0 || r_y <= 0.0 {
        let c = grad.stops[0].color;
        screen.boxfill(x0 as u32, y0 as u32, (x0 + w) as u32, (y0 + h) as u32, crate::kernel::draw::Color(c));
        return;
    }

    for y in 0..h {
        let py = y0 + y;
        let dy = (y as f32) - cy;
        for x in 0..w {
            let px = x0 + x;
            let dx = (x as f32) - cx;
            
            let t = libm::sqrtf((dx * dx) / (r_x * r_x) + (dy * dy) / (r_y * r_y));
            let color = sample_gradient_stops(&grad.stops, t);
            let alpha = ((color >> 24) & 0xFF) as u8;
            screen.draw_pixel_alpha(px as u32, py as u32, crate::kernel::draw::Color(color), alpha);
        }
    }
}

/// `background-clip` の `"border-box"`/`"padding-box"`/`"content-box"` を
/// 実際のピクセル差分（border 幅、または border+padding 幅）に変換する。
/// border-box は無変換（0,0,0,0）。
fn box_inset(el: &super::RenderElement, mode: &str) -> (i32, i32, i32, i32) {
    match mode {
        "content-box" => (
            el.border_top_width + el.padding_top,
            el.border_right_width + el.padding_right,
            el.border_bottom_width + el.padding_bottom,
            el.border_left_width + el.padding_left,
        ),
        "padding-box" => (
            el.border_top_width,
            el.border_right_width,
            el.border_bottom_width,
            el.border_left_width,
        ),
        _ => (0, 0, 0, 0),
    }
}

/// `background-clip` に基づき、背景の描画を制限すべき矩形（border-box 座標系）を返す。
/// `border-box`（既定）なら el の外形そのまま。
pub(super) fn bg_clip_rect(
    el: &super::RenderElement,
    x0_rect: i32,
    y0_rect: i32,
    x1_rect: i32,
    y1_rect: i32,
) -> (u32, u32, u32, u32) {
    let (top, right, bottom, left) = box_inset(el, &el.bg_clip);
    (
        (x0_rect + left).max(0) as u32,
        (y0_rect + top).max(0) as u32,
        (x1_rect - right).max(0) as u32,
        (y1_rect - bottom).max(0) as u32,
    )
}

/// `background-origin` に基づき、`draw_background_image()` へ渡す
/// `(origin_shift_x, origin_shift_y, origin_w, origin_h)` を計算する。
/// `origin_shift_*` は基準 box の左上が描画 box(`eff_w`/`eff_h` の左上)から
/// どれだけ内側にあるか、`origin_w`/`origin_h` は基準 box 自体のサイズ。
pub(super) fn bg_origin_shift(
    el: &super::RenderElement,
    eff_w: i32,
    eff_h: i32,
) -> (i32, i32, i32, i32) {
    let (top, right, bottom, left) = box_inset(el, &el.bg_origin);
    (
        left,
        top,
        (eff_w - left - right).max(1),
        (eff_h - top - bottom).max(1),
    )
}

/// background-image を要素の box 内に描画する。background-size/repeat/position を反映する。
/// `bg_size` が `Stretch`（未指定時の既定）なら従来どおり box 全面へ引き伸ばす。
/// `layer_override` を指定すると、複数レイヤー（`background-image: url(a), url(b)`）の
/// うちこのレイヤーだけの size/repeat-x/repeat-y/pos-x/pos-y を使う（以前は全レイヤーが
/// `el` 側の単一の値を共有しており、レイヤーごとの `background-position`/`-size`/`-repeat`
/// 指定が無視されるバグがあった）。`None` なら従来通り `el` の値をそのまま使う。
/// 【2026-07-31計測】背景画像描画に費やした tick の累積（フレーム毎にリセット）。
/// `paint` が 2.7 秒／フレームかかっている内訳を切り分けるため。
pub(crate) static BG_IMG_TICKS: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);

/// 【2026-07-31計測】グラデーション描画に費やした tick の累積。
pub(crate) static GRAD_TICKS: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);
/// 【2026-07-31計測】ボーダー描画に費やした tick の累積。
pub(crate) static BORDER_TICKS: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);
/// 【2026-07-31計測】`<img>` の拡縮描画に費やした tick の累積。
pub(crate) static IMG_TICKS: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);
/// 【2026-08-01計測】linear 以外の大面積描画
/// （radial / conic / 2 色グラデーション / rotate / skew）の累積 tick。
/// `GRAD_TICKS` は `draw_linear_gradient` しか見ていなかった。
pub(crate) static OTHERFILL_TICKS: core::sync::atomic::AtomicUsize =
    core::sync::atomic::AtomicUsize::new(0);

/// 早期 return が複数あるため、Drop で確実に積む。
struct TickTimer(usize, &'static core::sync::atomic::AtomicUsize);
impl Drop for TickTimer {
    fn drop(&mut self) {
        self.1.fetch_add(
            crate::kernel::timer::get_ticks().wrapping_sub(self.0),
            core::sync::atomic::Ordering::Relaxed,
        );
    }
}

/// 早期 return が複数あるため、Drop で確実に積む。
struct BgImgTimer(usize);
impl Drop for BgImgTimer {
    fn drop(&mut self) {
        BG_IMG_TICKS.fetch_add(
            crate::kernel::timer::get_ticks().wrapping_sub(self.0),
            core::sync::atomic::Ordering::Relaxed,
        );
    }
}

/// 計算量: **O(Wd×Hd × R)** — Wd,Hd は描画先サイズ、R は
/// `background-repeat` によるタイル数（`no-repeat` なら 1）。
///
/// 1 ピクセルごとに元画像をサンプリングして拡縮するため、
/// **元画像のサイズには依存せず描画先の面積で決まる**。
/// 拡縮結果はキャッシュしていないので**毎フレーム再計算**になる。
///
/// 実測: sugi-lab.net の 1 フレームで 33〜47 tick（paint の約 14%）。
pub(super) fn draw_background_image(
    screen: &crate::kernel::draw::Screen,
    img: &super::DecodedImage,
    el: &super::RenderElement,
    x0_rect: i32,
    y0_rect: i32,
    eff_w: i32,
    eff_h: i32,
    clip_s: &Option<ClipShape>,
    // `background-attachment: fixed` 用。垂直スクロール量をそのまま渡すと、
    // ボックス自体はスクロールで動いても背景パターンのサンプリング座標だけが
    // 打ち消されてビューポートに固定されて見える(このエンジンには横スクロール
    // モデル自体が存在しないため水平方向は常に0)。`scroll`(既定)なら常に0。
    attachment_shift_y: i32,
    // `background-origin`（既定 padding-box）用。position/size のパーセンテージ計算の
    // 基準となる box は、実際に描画・タイル敷き詰めを行う box(`eff_w`/`eff_h`。
    // `background-clip` により外側で screen.push_clip 済み)とは別物にできる。
    // `origin_shift_x/y` は基準box の左上が描画box の左上からどれだけ内側にあるか、
    // `origin_w/h` は基準box 自体のサイズ。border-box（既定と同じ扱い）なら
    // shift=(0,0)、origin_w/h=eff_w/eff_h を渡せばよい。
    origin_shift_x: i32,
    origin_shift_y: i32,
    origin_w: i32,
    origin_h: i32,
    layer_override: Option<(
        super::BgSizeMode,
        super::BgRepeatMode,
        super::BgRepeatMode,
        f32,
        f32,
    )>,
) {
    use super::{BgSizeMode, BgSizeVal};
    let _bg_timer = BgImgTimer(crate::kernel::timer::get_ticks());
    // Apply client insets to background drawing area
    let (mut x0_rect, mut y0_rect, mut eff_w, mut eff_h) = (x0_rect, y0_rect, eff_w, eff_h);
    if let Some((top, right, bottom, left)) = el.client_insets {
        x0_rect += left;
        y0_rect += top;
        eff_w -= left + right;
        eff_h -= top + bottom;
        if eff_w <= 0 || eff_h <= 0 {
            return;
        }
    }
    let (el_bg_size, el_bg_repeat_x, el_bg_repeat_y, el_bg_pos_x, el_bg_pos_y) =
        layer_override.unwrap_or((el.bg_size, el.bg_repeat_x, el.bg_repeat_y, el.bg_pos_x, el.bg_pos_y));
    // box_w/box_h: 実際にピクセルを描く(タイル敷き詰めの)範囲。background-clip の
    // クリップ済み座標系ではなく、常に要素の border-box 全体を走査する
    // （clip 自体は呼び出し側で screen.push_clip により別途適用済み）。
    let box_w = eff_w.max(1) as u32;
    let box_h = eff_h.max(1) as u32;
    // origin_box_w/h: background-size の % 解決と background-position のオフセット計算に
    // 使う基準 box（background-origin）。border-box なら box_w/h と同じ値になる。
    let origin_box_w = origin_w.max(1) as u32;
    let origin_box_h = origin_h.max(1) as u32;
    if img.width == 0 || img.height == 0 {
        return;
    }

    fn resolve_axis(v: BgSizeVal, box_dim: u32, img_dim: u32) -> Option<u32> {
        match v {
            BgSizeVal::Auto => None,
            BgSizeVal::Px(px) => Some(px.max(1) as u32),
            BgSizeVal::Percent(p) => Some(((box_dim as f32) * p).max(1.0) as u32),
        }
        .or(Some(img_dim))
    }

    let (draw_w, draw_h): (u32, u32) = match el_bg_size {
        BgSizeMode::Stretch => (origin_box_w, origin_box_h),
        BgSizeMode::Cover => {
            let scale = (origin_box_w as f32 / img.width as f32)
                .max(origin_box_h as f32 / img.height as f32);
            (
                ((img.width as f32) * scale).max(1.0) as u32,
                ((img.height as f32) * scale).max(1.0) as u32,
            )
        }
        BgSizeMode::Contain => {
            let scale = (origin_box_w as f32 / img.width as f32)
                .min(origin_box_h as f32 / img.height as f32);
            (
                ((img.width as f32) * scale).max(1.0) as u32,
                ((img.height as f32) * scale).max(1.0) as u32,
            )
        }
        BgSizeMode::Explicit(wv, hv) => {
            // 片方だけ auto の場合はアスペクト比を保って他方から逆算する。
            match (wv, hv) {
                (BgSizeVal::Auto, BgSizeVal::Auto) => (img.width, img.height),
                (BgSizeVal::Auto, _) => {
                    let h = resolve_axis(hv, origin_box_h, img.height).unwrap_or(img.height);
                    let w = ((img.width as f32) * (h as f32 / img.height as f32)).max(1.0) as u32;
                    (w, h)
                }
                (_, BgSizeVal::Auto) => {
                    let w = resolve_axis(wv, origin_box_w, img.width).unwrap_or(img.width);
                    let h = ((img.height as f32) * (w as f32 / img.width as f32)).max(1.0) as u32;
                    (w, h)
                }
                _ => (
                    resolve_axis(wv, origin_box_w, img.width).unwrap_or(img.width),
                    resolve_axis(hv, origin_box_h, img.height).unwrap_or(img.height),
                ),
            }
        }
    };

    // `background-repeat: round`（タイルをこの軸に整数個ちょうど収まるよう拡縮）/
    // `space`（タイル寸法は変えず、タイル間に等間隔の隙間を配分）を1軸ぶん解決する。
    // 戻り値: (実効タイル寸法, タイル開始位置の周期(=タイル+隙間), bg-positionを無視するか)。
    // round/space はタイルを軸全体に敷き詰める挙動が前提のため、position は無視する簡略実装。
    fn tile_layout(mode: super::BgRepeatMode, box_dim: u32, tile_dim: u32) -> (u32, u32, bool) {
        use super::BgRepeatMode;
        match mode {
            BgRepeatMode::Round => {
                let n =
                    (libm::roundf(box_dim as f32 / tile_dim.max(1) as f32) as u32).max(1);
                let eff = (box_dim / n).max(1);
                (eff, eff, true)
            }
            BgRepeatMode::Space => {
                let n = box_dim / tile_dim.max(1);
                if n <= 1 {
                    (tile_dim, tile_dim, false)
                } else {
                    let gap = box_dim.saturating_sub(n * tile_dim) / (n - 1);
                    (tile_dim, tile_dim + gap, true)
                }
            }
            _ => (tile_dim, tile_dim, false),
        }
    }

    let (draw_w_eff, pitch_w, ignore_pos_x) = tile_layout(el_bg_repeat_x, box_w, draw_w);
    let (draw_h_eff, pitch_h, ignore_pos_y) = tile_layout(el_bg_repeat_y, box_h, draw_h);
    // off_x/off_y は background-origin の基準 box 内でのオフセット。
    // 実際に描くのは box_w/box_h(=描画/クリップ側の座標系)なので、
    // 基準 box の左上が描画 box の左上からどれだけ内側にあるか(origin_shift_x/y)を
    // 加算してから rel_x/rel_y の計算(下)で使う。
    let off_x = if ignore_pos_x {
        0
    } else {
        ((origin_box_w as i32 - draw_w as i32) as f32 * el_bg_pos_x) as i32
    };
    let off_y = if ignore_pos_y {
        0
    } else {
        ((origin_box_h as i32 - draw_h as i32) as f32 * el_bg_pos_y) as i32
    };

    // 列方向のサンプリング座標を事前計算し、行ループ内での除算・剰余・条件分岐を完全排除する
    let col_src: alloc::vec::Vec<Option<u32>> = (0..box_w)
        .map(|col| {
            let rel_x = (col as i32 - origin_shift_x) - off_x;
            let sample_x = match el_bg_repeat_x {
                super::BgRepeatMode::NoRepeat => rel_x,
                super::BgRepeatMode::Space => {
                    let m = rel_x.rem_euclid(pitch_w as i32);
                    if m >= draw_w_eff as i32 {
                        return None;
                    }
                    m
                }
                _ => rel_x.rem_euclid(draw_w_eff as i32),
            };
            if sample_x < 0 || sample_x >= draw_w_eff as i32 {
                None
            } else {
                Some((sample_x as u32 * img.width) / draw_w_eff.max(1))
            }
        })
        .collect();

    let has_blend = !el.background_blend_mode.is_empty() && el.background_blend_mode != "normal";
    let blend_dst = if has_blend {
        el.bg_color.map(|bg| (
            ((bg >> 16) & 0xFF) as u8,
            ((bg >> 8) & 0xFF) as u8,
            (bg & 0xFF) as u8,
        ))
    } else {
        None
    };

    let mut row_buf = if clip_s.is_none() {
        alloc::vec![0u32; box_w as usize]
    } else {
        alloc::vec![]
    };

    for row in 0..box_h {
        let rel_y = (row as i32 + attachment_shift_y - origin_shift_y) - off_y;
        let sample_y = match el_bg_repeat_y {
            super::BgRepeatMode::NoRepeat => rel_y,
            super::BgRepeatMode::Space => {
                let m = rel_y.rem_euclid(pitch_h as i32);
                if m >= draw_h_eff as i32 {
                    continue;
                }
                m
            }
            _ => rel_y.rem_euclid(draw_h_eff as i32),
        };
        if sample_y < 0 || sample_y >= draw_h_eff as i32 {
            continue;
        }
        let src_row = (sample_y as u32 * img.height) / draw_h_eff.max(1);
        let row_offset = (src_row * img.width) as usize;
        let py = (y0_rect as u32).wrapping_add(row);

        if clip_s.is_none() {
            // clip-path なしの高速パス: 行バッファを生成してスキャンライン直列転送
            for col in 0..box_w {
                let src_col = match col_src[col as usize] {
                    Some(sc) => sc,
                    None => {
                        row_buf[col as usize] = 0;
                        continue;
                    }
                };
                let idx = (row_offset + src_col as usize) * 4;
                if idx + 4 <= img.rgba.len() {
                    let mut r = img.rgba[idx];
                    let mut g = img.rgba[idx + 1];
                    let mut b = img.rgba[idx + 2];
                    let raw_a = img.rgba[idx + 3];
                    if raw_a == 0 {
                        row_buf[col as usize] = 0;
                        continue;
                    }
                    let a = ((raw_a as u32 * el.opacity as u32) / 255) as u8;
                    if a == 0 {
                        row_buf[col as usize] = 0;
                        continue;
                    }

                    if let Some(dst) = blend_dst {
                        let (br, bgc, bb) = blend_pixel(&el.background_blend_mode, (r, g, b), dst);
                        r = br;
                        g = bgc;
                        b = bb;
                    }
                    row_buf[col as usize] = ((a as u32) << 24) | ((r as u32) << 16) | ((g as u32) << 8) | (b as u32);
                } else {
                    row_buf[col as usize] = 0;
                }
            }
            screen.draw_scanline_colors(x0_rect, py as i32, &row_buf);
        } else {
            // clip-path ありの汎用パス
            for col in 0..box_w {
                let src_col = match col_src[col as usize] {
                    Some(sc) => sc,
                    None => continue,
                };
                if let Some(ref cs) = clip_s {
                    if !clip_inside(cs, col as i32, row as i32) {
                        continue;
                    }
                }

                let idx = (row_offset + src_col as usize) * 4;
                if idx + 4 <= img.rgba.len() {
                    let mut r = img.rgba[idx];
                    let mut g = img.rgba[idx + 1];
                    let mut b = img.rgba[idx + 2];
                    let raw_a = img.rgba[idx + 3];
                    if raw_a == 0 {
                        continue;
                    }
                    let a = ((raw_a as u32 * el.opacity as u32) / 255) as u8;
                    if a == 0 {
                        continue;
                    }

                    if let Some(dst) = blend_dst {
                        let (br, bgc, bb) = blend_pixel(&el.background_blend_mode, (r, g, b), dst);
                        r = br;
                        g = bgc;
                        b = bb;
                    }
                    let color = crate::kernel::draw::Color(
                        0xFF000000 | ((r as u32) << 16) | ((g as u32) << 8) | (b as u32),
                    );
                    screen.draw_pixel_alpha((x0_rect as u32).wrapping_add(col), py, color, a);
                }
            }
        }
    }
}

/// `text-decoration-line`（underline/line-through）の水平線を `style`
/// （solid/dotted/dashed/wavy/double、空文字またはその他は solid 扱い）と
/// `thickness`（`text-decoration-thickness`、px。最低1pxにクランプ）で描画する。
pub(super) fn draw_decoration_line(
    screen: &crate::kernel::draw::Screen,
    x0: u32,
    y: u32,
    x1: u32,
    style: &str,
    color: u32,
    thickness: u32,
) {
    if x1 <= x0 {
        return;
    }
    let t = thickness.max(1);
    let color_val = crate::kernel::draw::Color(color);
    match style {
        "dotted" => {
            let mut x = x0;
            while x < x1 {
                let seg_end = (x + 2).min(x1);
                screen.boxfill(x, y, (seg_end - 1).max(x), y + t - 1, color_val);
                x += 4;
            }
        }
        "dashed" => {
            let mut x = x0;
            while x < x1 {
                let seg_end = (x + 5).min(x1);
                screen.boxfill(x, y, (seg_end - 1).max(x), y + t - 1, color_val);
                x += 8;
            }
        }
        "wavy" => {
            // 振幅2px・周期6pxの単純な三角波（サイン波の近似）。thickness分だけ縦に太らせる。
            let amplitude = 2i32;
            let period = 6i32;
            for x in x0..x1 {
                let phase = (x as i32 - x0 as i32) % period;
                let dy = if phase < period / 2 { phase - amplitude / 2 } else { period - phase - amplitude / 2 };
                let py = (y as i32 + dy).max(0) as u32;
                screen.boxfill(x, py, x, py + t - 1, color_val);
            }
        }
        "double" => {
            let x_end = (x1 - 1).max(x0);
            screen.boxfill(x0, y, x_end, y + t - 1, color_val);
            let y2 = y + t + 2;
            screen.boxfill(x0, y2, x_end, y2 + t - 1, color_val);
        }
        _ => {
            let x_end = (x1 - 1).max(x0);
            screen.boxfill(x0, y, x_end, y + t - 1, color_val);
        }
    }
}

/// outline を描画する。border-box の外側に `offset` だけ離して `width` px の枠線を引く。
/// レイアウトに影響しない装飾のため、border とは独立して呼ぶ。
pub(super) fn draw_outline(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    x1: i32,
    y1: i32,
    width: i32,
    offset: i32,
    color: u32,
    style: &str,
) {
    let ox0 = x0 - offset - width;
    let oy0 = y0 - offset - width;
    let ox1 = x1 + offset + width;
    let oy1 = y1 + offset + width;
    // dashed/dotted: 破線パターンの矩形を width 回重ねて太さを近似する
    // （dotted も既存の dashed 実装を流用する簡略実装、独立した点線パターンは非対応）。
    if matches!(style, "dashed" | "dotted") {
        for i in 0..width {
            draw_dashed_border(screen, ox0 + i, oy0 + i, ox1 - i, oy1 - i, color);
        }
        return;
    }
    for i in 0..width {
        draw_border(screen, ox0 + i, oy0 + i, ox1 - i, oy1 - i, color);
    }
}

/// <img> の object-fit / object-position を反映して画像を描画する。
/// background-image と異なりタイリングはしない（範囲外は透過のまま何も描かない）。

/// `filter` 文字列から `drop-shadow(ox oy blur color)` を抽出し、box-shadow相当のタプルを返す。
pub(crate) fn parse_drop_shadow(filter: &str) -> Option<(i32, i32, i32, u32, bool)> {
    let lower = filter.to_ascii_lowercase();
    let start = lower.find("drop-shadow(")?;
    #[allow(clippy::string_slice)]
    let rest = &lower[start + 12..];
    let close = rest.find(')')?;
    #[allow(clippy::string_slice)]
    let arg = rest[..close].trim();
    
    let mut ox = 0i32;
    let mut oy = 0i32;
    let mut blur = 0i32;
    let mut shadow_color = 0x80000000u32;
    let mut px_count = 0;
    
    for token in arg.split_whitespace() {
        if let Some(n) = token.strip_suffix("px") {
            // `n.parse::<i32>()` は "1.5" のような小数値を拒否し、その場合トークン全体が
            // 無音のまま既定値0に落ちてしまう（outline-offset で見つけたのと同根のバグ）。
            // f32 として解析してから丸めることで小数px値も正しく反映する。
            if let Ok(n) = n.trim().parse::<f32>().map(|v| v as i32) {
                match px_count {
                    0 => { ox = n; px_count += 1; }
                    1 => { oy = n; px_count += 1; }
                    2 => { blur = n; px_count += 1; }
                    _ => {}
                }
            }
        } else if let Some(c) = crate::os_lib::css::parse_color(token) {
            shadow_color = c;
        }
    }
    
    if px_count >= 2 {
        Some((ox, oy, blur, shadow_color, false))
    } else {
        None
    }
}

/// `img` の (src_row, src_col) を中心に半径 `radius`（source pixel 単位）のボックスブラーを
/// かけた色を返す。画像端はクランプせず範囲外を単純にスキップする（サンプル数で正規化）。
pub(crate) fn sample_box_blur(
    img: &super::DecodedImage,
    src_row: u32,
    src_col: u32,
    radius: i32,
) -> (u8, u8, u8) {
    let r = radius.clamp(1, 8);
    let (mut sr, mut sg, mut sb, mut n) = (0i64, 0i64, 0i64, 0i64);
    for dy in -r..=r {
        let ry = src_row as i32 + dy;
        if ry < 0 || ry as u32 >= img.height {
            continue;
        }
        for dx in -r..=r {
            let rx = src_col as i32 + dx;
            if rx < 0 || rx as u32 >= img.width {
                continue;
            }
            let idx = ((ry as u32 * img.width + rx as u32) as usize) * 4;
            if idx + 3 < img.rgba.len() {
                sr += img.rgba[idx] as i64;
                sg += img.rgba[idx + 1] as i64;
                sb += img.rgba[idx + 2] as i64;
                n += 1;
            }
        }
    }
    if n == 0 {
        return (0, 0, 0);
    }
    ((sr / n) as u8, (sg / n) as u8, (sb / n) as u8)
}

/// 画面上の指定矩形領域をボックスブラーする（インプレースではなく一時バッファを使用）。
pub(crate) fn blur_screen_rect(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    x1: i32,
    y1: i32,
    radius: i32,
) {
    if radius <= 0 || x1 <= x0 || y1 <= y0 {
        return;
    }
    let r = radius.clamp(1, 8);
    let w = (x1 - x0) as usize;
    let h = (y1 - y0) as usize;

    // 一時バッファに画面のピクセルを読み込む
    let mut buf = alloc::vec::Vec::with_capacity(w * h);
    for y in y0..y1 {
        for x in x0..x1 {
            buf.push(screen.read_pixel(x as u32, y as u32).0);
        }
    }

    // 【2026-08-01 性能修正】仕様は `spec/backdrop_blur.md`。
    //
    // 以前はここで素朴な 2 次元ボックスブラー O(W×H×(2r+1)²) を回していた。
    // r は最大 8 なので 1 ピクセルあたり最大 289 サンプル。
    // sugi-lab.net のナビゲーションバー（924×44）で 1170 万回／フレームとなり、
    // **1 要素だけで 179〜478 tick** かかっていた（面積が 12 倍ある
    // 924×529 の要素より数倍重い、という形で実測に現れた）。
    //
    // 累積和による **O(W×H)**（半径に依存しない）実装へ置換。
    // 出力は素朴実装と**ビット単位で一致**する（B-1。単体試験で
    // 参照実装と総当たり比較して確認済み）。
    let blurred = super::blur_box::box_blur_rgb(&buf, w, h, r as usize);

    for y in 0..h {
        let sy = y0 + y as i32;
        if sy < 0 || sy as u32 >= screen.height {
            continue;
        }
        for x in 0..w {
            let sx = x0 + x as i32;
            if sx < 0 || sx as u32 >= screen.width {
                continue;
            }
            screen.draw_pixel_alpha(
                sx as u32,
                sy as u32,
                crate::kernel::draw::Color(blurred[y * w + x]),
                255,
            );
        }
    }
}

pub(crate) fn apply_backdrop_filters_to_screen_rect(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    x1: i32,
    y1: i32,
    backdrop_filter: &str,
) {
    if backdrop_filter.is_empty() || x1 <= x0 || y1 <= y0 {
        return;
    }
    let backdrop_blur_radius = parse_blur_radius(backdrop_filter);
    if backdrop_blur_radius > 0 {
        blur_screen_rect(screen, x0, y0, x1, y1, backdrop_blur_radius);
    }
    
    // Check if there are color filter functions (brightness, contrast, saturate, etc.)
    let tokens = parse_filter_tokens(backdrop_filter);
    let has_color_filters = tokens.iter().any(|(name, _)| name != "blur");
    if !has_color_filters {
        return;
    }

    for sy in y0..y1 {
        if sy < 0 || sy as u32 >= screen.height { continue; }
        for sx in x0..x1 {
            if sx < 0 || sx as u32 >= screen.width { continue; }
            let orig = screen.read_pixel(sx as u32, sy as u32).0;
            let (r, g, b) = (((orig >> 16) & 0xFF) as u8, ((orig >> 8) & 0xFF) as u8, (orig & 0xFF) as u8);
            let (fr, fg, fb) = apply_css_filters(backdrop_filter, r, g, b);
            let new_col = 0xFF000000 | ((fr as u32) << 16) | ((fg as u32) << 8) | (fb as u32);
            screen.draw_pixel_alpha(sx as u32, sy as u32, crate::kernel::draw::Color(new_col), 255);
        }
    }
}

/// `mix-blend-mode` / `background-blend-mode`: 描画しようとしている色(src)を、
/// 既にフレームバッファ上にある色(dst = 背景)と指定モードで合成する。
/// 対応: normal(そのまま)/multiply/screen/darken/lighten/difference/overlay/
/// hard-light/soft-light/exclusion/color-dodge/color-burn（チャネルごとの独立計算）と、
/// hue/saturation/color/luminosity（W3C Compositing 仕様の Lum/Sat/SetLum/SetSat
/// アルゴリズムに基づく非可分モード、3チャネルまとめて計算）。
pub(crate) fn blend_pixel(mode: &str, src: (u8, u8, u8), dst: (u8, u8, u8)) -> (u8, u8, u8) {
    if matches!(mode, "hue" | "saturation" | "color" | "luminosity") {
        return blend_non_separable(mode, src, dst);
    }
    if mode == "soft-light" {
        fn soft(s: u8, d: u8) -> u8 {
            let (cs, cb) = (s as f32 / 255.0, d as f32 / 255.0);
            let dd = if cb <= 0.25 {
                ((16.0 * cb - 12.0) * cb + 4.0) * cb
            } else {
                libm::sqrtf(cb)
            };
            let b = if cs <= 0.5 {
                cb - (1.0 - 2.0 * cs) * cb * (1.0 - cb)
            } else {
                cb + (2.0 * cs - 1.0) * (dd - cb)
            };
            (b.clamp(0.0, 1.0) * 255.0) as u8
        }
        return (soft(src.0, dst.0), soft(src.1, dst.1), soft(src.2, dst.2));
    }
    fn ch(mode: &str, s: u8, d: u8) -> u8 {
        let (sf, df) = (s as i32, d as i32);
        match mode {
            "multiply" => (sf * df / 255) as u8,
            "screen" => (255 - (255 - sf) * (255 - df) / 255) as u8,
            "darken" => sf.min(df) as u8,
            "lighten" => sf.max(df) as u8,
            "difference" => (sf - df).unsigned_abs() as u8,
            "overlay" => {
                if df <= 127 {
                    (2 * sf * df / 255).clamp(0, 255) as u8
                } else {
                    (255 - 2 * (255 - sf) * (255 - df) / 255).clamp(0, 255) as u8
                }
            }
            "hard-light" => {
                if sf <= 127 {
                    (2 * sf * df / 255).clamp(0, 255) as u8
                } else {
                    (255 - 2 * (255 - sf) * (255 - df) / 255).clamp(0, 255) as u8
                }
            }
            "exclusion" => (sf + df - 2 * sf * df / 255).clamp(0, 255) as u8,
            "color-dodge" => {
                if df == 0 {
                    0
                } else if sf >= 255 {
                    255
                } else {
                    (255 * df / (255 - sf)).min(255) as u8
                }
            }
            "color-burn" => {
                if df >= 255 {
                    255
                } else if sf == 0 {
                    0
                } else {
                    (255 - (255 * (255 - df) / sf).min(255)) as u8
                }
            }
            _ => s,
        }
    }
    (
        ch(mode, src.0, dst.0),
        ch(mode, src.1, dst.1),
        ch(mode, src.2, dst.2),
    )
}

/// hue/saturation/color/luminosity（非可分ブレンドモード）。W3C Compositing and
/// Blending Level 1 の Lum/ClipColor/SetLum/Sat/SetSat アルゴリズムをそのまま実装する。
/// `dst` = backdrop(Cb)、`src` = source(Cs)。
fn blend_non_separable(mode: &str, src: (u8, u8, u8), dst: (u8, u8, u8)) -> (u8, u8, u8) {
    fn to_f(c: (u8, u8, u8)) -> (f32, f32, f32) {
        (c.0 as f32 / 255.0, c.1 as f32 / 255.0, c.2 as f32 / 255.0)
    }
    fn to_u8(c: (f32, f32, f32)) -> (u8, u8, u8) {
        (
            (c.0.clamp(0.0, 1.0) * 255.0) as u8,
            (c.1.clamp(0.0, 1.0) * 255.0) as u8,
            (c.2.clamp(0.0, 1.0) * 255.0) as u8,
        )
    }
    fn lum(c: (f32, f32, f32)) -> f32 {
        0.3 * c.0 + 0.59 * c.1 + 0.11 * c.2
    }
    fn clip_color(c: (f32, f32, f32)) -> (f32, f32, f32) {
        let l = lum(c);
        let n = c.0.min(c.1).min(c.2);
        let x = c.0.max(c.1).max(c.2);
        let mut c = c;
        if n < 0.0 && l != n {
            c = (
                l + (c.0 - l) * l / (l - n),
                l + (c.1 - l) * l / (l - n),
                l + (c.2 - l) * l / (l - n),
            );
        }
        if x > 1.0 && x != l {
            c = (
                l + (c.0 - l) * (1.0 - l) / (x - l),
                l + (c.1 - l) * (1.0 - l) / (x - l),
                l + (c.2 - l) * (1.0 - l) / (x - l),
            );
        }
        c
    }
    fn set_lum(c: (f32, f32, f32), l: f32) -> (f32, f32, f32) {
        let d = l - lum(c);
        clip_color((c.0 + d, c.1 + d, c.2 + d))
    }
    fn sat(c: (f32, f32, f32)) -> f32 {
        c.0.max(c.1).max(c.2) - c.0.min(c.1).min(c.2)
    }
    fn set_sat(c: (f32, f32, f32), s: f32) -> (f32, f32, f32) {
        let mut v = [c.0, c.1, c.2];
        let (mut lo, mut mid, mut hi) = (0usize, 1usize, 2usize);
        // インデックスを値の昇順(lo<=mid<=hi)に並べ替える。
        if v[lo] > v[mid] {
            core::mem::swap(&mut lo, &mut mid);
        }
        if v[mid] > v[hi] {
            core::mem::swap(&mut mid, &mut hi);
        }
        if v[lo] > v[mid] {
            core::mem::swap(&mut lo, &mut mid);
        }
        if v[hi] > v[lo] {
            v[mid] = (v[mid] - v[lo]) * s / (v[hi] - v[lo]);
            v[hi] = s;
        } else {
            v[mid] = 0.0;
            v[hi] = 0.0;
        }
        v[lo] = 0.0;
        (v[0], v[1], v[2])
    }
    let (cb, cs) = (to_f(dst), to_f(src));
    let result = match mode {
        "hue" => set_lum(set_sat(cs, sat(cb)), lum(cb)),
        "saturation" => set_lum(set_sat(cb, sat(cs)), lum(cb)),
        "color" => set_lum(cs, lum(cb)),
        "luminosity" => set_lum(cb, lum(cs)),
        _ => cs,
    };
    to_u8(result)
}

/// `list-style-image` 用の小さな画像を (x0,y0) を左上として dst_w x dst_h へ最近傍スケーリング
/// して描画する。クリップ・object-fit 等は考慮しない簡易実装（マーカーサイズのアイコン用途）。
pub(super) fn draw_image_nn_blit(
    screen: &crate::kernel::draw::Screen,
    img: &super::DecodedImage,
    x0: i32,
    y0: i32,
    dst_w: u32,
    dst_h: u32,
) {
    if img.width == 0 || img.height == 0 || dst_w == 0 || dst_h == 0 {
        return;
    }
    for row in 0..dst_h {
        let src_row = (row * img.height) / dst_h;
        for col in 0..dst_w {
            let src_col = (col * img.width) / dst_w;
            let idx = ((src_row * img.width + src_col) as usize) * 4;
            if idx + 4 <= img.rgba.len() {
                let r = img.rgba[idx];
                let g = img.rgba[idx + 1];
                let b = img.rgba[idx + 2];
                let a = img.rgba[idx + 3];
                let px = x0 + col as i32;
                let py = y0 + row as i32;
                if px >= 0 && py >= 0 {
                    let color = crate::kernel::draw::Color(
                        0xFF000000 | ((r as u32) << 16) | ((g as u32) << 8) | (b as u32),
                    );
                    screen.draw_pixel_alpha(px as u32, py as u32, color, a);
                }
            }
        }
    }
}

/// 計算量: **O(Wd×Hd)** — Wd,Hd は描画先サイズ。
/// 1 ピクセルごとに元画像をサンプリングする（`sample_bilinear_rgba` 使用時は
/// 1 ピクセルあたり 4 点読み出し＋補間で定数倍が 4 倍になる）。
pub(super) fn draw_img_object_fit(
    screen: &crate::kernel::draw::Screen,
    img: &super::DecodedImage,
    el: &super::RenderElement,
    x0_rect: i32,
    y0_rect: i32,
    clip_s: &Option<ClipShape>,
) {
    use super::ObjectFit;
    let box_w = el.width.max(1) as u32;
    let box_h = el.height.max(1) as u32;
    if img.width == 0 || img.height == 0 {
        return;
    }

    let (draw_w, draw_h): (u32, u32) = match el.object_fit {
        ObjectFit::Fill => (box_w, box_h),
        ObjectFit::Cover => {
            let scale = (box_w as f32 / img.width as f32).max(box_h as f32 / img.height as f32);
            (
                ((img.width as f32) * scale).max(1.0) as u32,
                ((img.height as f32) * scale).max(1.0) as u32,
            )
        }
        ObjectFit::Contain => {
            let scale = (box_w as f32 / img.width as f32).min(box_h as f32 / img.height as f32);
            (
                ((img.width as f32) * scale).max(1.0) as u32,
                ((img.height as f32) * scale).max(1.0) as u32,
            )
        }
        ObjectFit::None => (img.width, img.height),
        ObjectFit::ScaleDown => {
            let contain_scale =
                (box_w as f32 / img.width as f32).min(box_h as f32 / img.height as f32);
            let scale = contain_scale.min(1.0);
            (
                ((img.width as f32) * scale).max(1.0) as u32,
                ((img.height as f32) * scale).max(1.0) as u32,
            )
        }
    };

    let off_x = ((box_w as i32 - draw_w as i32) as f32 * el.object_pos_x) as i32;
    let off_y = ((box_h as i32 - draw_h as i32) as f32 * el.object_pos_y) as i32;
    let blur_radius = parse_blur_radius(&el.filter);

    let is_pixelated = el.image_rendering == "pixelated" || el.image_rendering == "crisp-edges";
    let use_nearest = is_pixelated || (draw_w == img.width && draw_h == img.height);
    let col_src_lut: alloc::vec::Vec<u32> = if use_nearest {
        (0..draw_w).map(|c| (c * img.width) / draw_w.max(1)).collect()
    } else {
        alloc::vec![]
    };

    let mut row_buf = alloc::vec![0u32; draw_w as usize];

    for row in 0..draw_h {
        let py = row as i32 + off_y;
        if py < 0 || py as u32 >= box_h {
            continue;
        }
        let src_row = (row * img.height) / draw_h.max(1);
        for col in 0..draw_w {
            let px = col as i32 + off_x;
            if px < 0 || px as u32 >= box_w {
                row_buf[col as usize] = 0;
                continue;
            }
            if let Some(ref cs) = clip_s {
                if !clip_inside(cs, px, py) {
                    row_buf[col as usize] = 0;
                    continue;
                }
            }

            let (raw_r, raw_g, raw_b, a) = if use_nearest {
                let src_col = col_src_lut[col as usize];
                let idx = ((src_row * img.width + src_col) as usize) * 4;
                if idx + 4 <= img.rgba.len() {
                    let (br_r, br_g, br_b) = if blur_radius > 0 {
                        sample_box_blur(img, src_row, src_col, blur_radius)
                    } else {
                        (img.rgba[idx], img.rgba[idx + 1], img.rgba[idx + 2])
                    };
                    (br_r, br_g, br_b, img.rgba[idx + 3])
                } else {
                    (0, 0, 0, 0)
                }
            } else {
                let u = ((col as f32) + 0.5) * (img.width as f32) / (draw_w as f32) - 0.5;
                let v = ((row as f32) + 0.5) * (img.height as f32) / (draw_h as f32) - 0.5;
                sample_bilinear_rgba(img, u, v)
            };
            if a == 0 {
                row_buf[col as usize] = 0;
                continue;
            }
            let (r, g, b) = apply_css_filters(&el.filter, raw_r, raw_g, raw_b);
            row_buf[col as usize] = ((a as u32) << 24) | ((r as u32) << 16) | ((g as u32) << 8) | (b as u32);
        }

        screen.draw_scanline_colors(x0_rect + off_x, y0_rect + py, &row_buf);
    }
}