atmos/os_lib/web_engine/

draw_helpers.rs

// web_engine/draw_helpers.rs - Draw utility functions

use crate::os_lib::css::parse_color;
use alloc::vec::Vec;

/// 計算量: **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 as u32,
                    (y0 + t_w) as u32,
                    crate::kernel::draw::Color(color),
                );
                x += dash + gap;
            }
        } else {
            screen.boxfill(
                x0 as u32,
                y0 as u32,
                x1 as u32,
                (y0 + t_w) 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 as u32,
                    y1 as u32,
                    crate::kernel::draw::Color(color),
                );
                x += dash + gap;
            }
        } else {
            screen.boxfill(
                x0 as u32,
                (y1 - b_w) as u32,
                x1 as u32,
                y1 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) as u32,
                    end as u32,
                    crate::kernel::draw::Color(color),
                );
                y += dash + gap;
            }
        } else {
            screen.boxfill(
                x0 as u32,
                y0 as u32,
                (x0 + l_w) as u32,
                y1 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 as u32,
                    end as u32,
                    crate::kernel::draw::Color(color),
                );
                y += dash + gap;
            }
        } else {
            screen.boxfill(
                (x1 - r_w) as u32,
                y0 as u32,
                x1 as u32,
                y1 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;
    }
    screen.boxfill(
        x0 as u32,
        y0 as u32,
        x1 as u32,
        (y0 + 1) as u32,
        crate::kernel::draw::Color(color_val),
    );
    screen.boxfill(
        x0 as u32,
        (y1 - 1) as u32,
        x1 as u32,
        y1 as u32,
        crate::kernel::draw::Color(color_val),
    );
    screen.boxfill(
        x0 as u32,
        y0 as u32,
        (x0 + 1) as u32,
        y1 as u32,
        crate::kernel::draw::Color(color_val),
    );
    screen.boxfill(
        (x1 - 1) as u32,
        y0 as u32,
        x1 as u32,
        y1 as u32,
        crate::kernel::draw::Color(color_val),
    );
}

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 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 as u32,
            (y0 + 1) as u32,
            crate::kernel::draw::Color(color_val),
        );
        screen.boxfill(
            x as u32,
            (y1 - 1) as u32,
            end as u32,
            y1 as u32,
            crate::kernel::draw::Color(color_val),
        );
        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 + 1) as u32,
            end as u32,
            crate::kernel::draw::Color(color_val),
        );
        screen.boxfill(
            (x1 - 1) as u32,
            y as u32,
            x1 as u32,
            end as u32,
            crate::kernel::draw::Color(color_val),
        );
        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);
                }
            }
        }
    }
}

/// Parsed clip-path shape in element-relative pixel coordinates.
pub enum ClipShape {
    Circle { cx: i32, cy: i32, r_sq: i64 },
    Ellipse { cx: i32, cy: i32, rx: i32, ry: i32 },
    Inset { x0: i32, y0: i32, x1: i32, y1: i32, radius: (i32, i32, i32, i32) },
    Polygon { points: Vec<(i32, i32)>, nonzero: bool },
}

/// Parse CSS `clip-path` value into pixel coordinates relative to the element.
/// `w` and `h` are the element's rendered width and height in pixels.
pub fn parse_clip_shape(css: &str, w: i32, h: i32) -> Option<ClipShape> {
    let s = css.trim();

    if let Some(inner) = s.strip_prefix("circle(").and_then(|t| t.strip_suffix(')')) {
        let mut parts = inner.splitn(2, "at");
        let r_str = parts.next().unwrap_or("50%").trim();
        let r = clip_len(r_str, w.min(h)) as i32;
        let (cx, cy) = if let Some(at) = parts.next() {
            let mut ps = at.split_whitespace();
            let cx = ps.next().map(|sv| clip_pos(sv, w)).unwrap_or(w / 2);
            let cy = ps.next().map(|sv| clip_pos(sv, h)).unwrap_or(h / 2);
            (cx, cy)
        } else {
            (w / 2, h / 2)
        };
        return Some(ClipShape::Circle { cx, cy, r_sq: (r as i64) * (r as i64) });
    }

    if let Some(inner) = s.strip_prefix("ellipse(").and_then(|t| t.strip_suffix(')')) {
        let mut parts = inner.splitn(2, "at");
        let radii_str = parts.next().unwrap_or("50% 50%").trim();
        let mut radii = radii_str.split_whitespace();
        let rx = radii.next().map(|sv| clip_len(sv, w) as i32).unwrap_or(w / 2);
        let ry = radii.next().map(|sv| clip_len(sv, h) as i32).unwrap_or(h / 2);
        let (cx, cy) = if let Some(at) = parts.next() {
            let mut ps = at.split_whitespace();
            let cx = ps.next().map(|sv| clip_pos(sv, w)).unwrap_or(w / 2);
            let cy = ps.next().map(|sv| clip_pos(sv, h)).unwrap_or(h / 2);
            (cx, cy)
        } else {
            (w / 2, h / 2)
        };
        return Some(ClipShape::Ellipse { cx, cy, rx, ry });
    }

    if let Some(inner) = s.strip_prefix("inset(").and_then(|t| t.strip_suffix(')')) {
        let mut parts = inner.split("round");
        let body = parts.next().unwrap_or(inner).trim();
        let round_part = parts.next().map(|s| s.trim());
        let mut vals = body.split_whitespace().map(|sv| clip_len(sv, w.max(h)) as i32);
        let top    = vals.next().unwrap_or(0);
        let right  = vals.next().unwrap_or(top);
        let bottom = vals.next().unwrap_or(top);
        let left   = vals.next().unwrap_or(right);

        let radius = if let Some(r_str) = round_part {
            let mut r_vals = r_str.split_whitespace().map(|sv| clip_len(sv, w.min(h)) as i32);
            let r_tl = r_vals.next().unwrap_or(0);
            let r_tr = r_vals.next().unwrap_or(r_tl);
            let r_br = r_vals.next().unwrap_or(r_tl);
            let r_bl = r_vals.next().unwrap_or(r_tr);
            (r_tl, r_tr, r_br, r_bl)
        } else {
            (0, 0, 0, 0)
        };

        return Some(ClipShape::Inset { x0: left, y0: top, x1: w - right, y1: h - bottom, radius });
    }

    if let Some(inner) = s.strip_prefix("polygon(").and_then(|t| t.strip_suffix(')')) {
        let mut nonzero = false;
        let mut pairs_src = inner;
        if let Some(rest) = inner.trim_start().strip_prefix("nonzero") {
            nonzero = true;
            pairs_src = rest.trim_start().strip_prefix(',').unwrap_or(rest);
        } else if let Some(rest) = inner.trim_start().strip_prefix("evenodd") {
            pairs_src = rest.trim_start().strip_prefix(',').unwrap_or(rest);
        }
        let mut points = Vec::new();
        for pair in pairs_src.split(',') {
            let mut coords = pair.split_whitespace();
            if let (Some(xs), Some(ys)) = (coords.next(), coords.next()) {
                points.push((clip_len(xs, w) as i32, clip_len(ys, h) as i32));
            }
        }
        if points.len() >= 3 {
            return Some(ClipShape::Polygon { points, nonzero });
        }
    }

    None
}

/// Returns `true` if point `(ox, oy)` in element-local pixels is inside the clip shape.
/// 計算量: **O(V)** — V は多角形の頂点数（`polygon()` の場合）。
/// 円・楕円・矩形は O(1)。
/// **毎ピクセル呼ばれる**ため、多角形クリップは面積 × 頂点数で効く。
pub fn clip_inside(shape: &ClipShape, ox: i32, oy: i32) -> bool {
    match shape {
        ClipShape::Circle { cx, cy, r_sq } => {
            let dx = (ox - cx) as i64;
            let dy = (oy - cy) as i64;
            dx * dx + dy * dy <= *r_sq
        }
        ClipShape::Ellipse { cx, cy, rx, ry } => {
            if *rx == 0 || *ry == 0 { return false; }
            let dx = (ox - cx) as f32 / (*rx as f32);
            let dy = (oy - cy) as f32 / (*ry as f32);
            dx * dx + dy * dy <= 1.0
        }
        ClipShape::Inset { x0, y0, x1, y1, radius } => {
            if ox >= *x0 && ox < *x1 && oy >= *y0 && oy < *y1 {
                if *radius == (0, 0, 0, 0) {
                    true
                } else {
                    let rx = ox - *x0;
                    let ry = oy - *y0;
                    let iw = *x1 - *x0;
                    let ih = *y1 - *y0;
                    point_in_rounded_rect(rx, ry, iw, ih, *radius)
                }
            } else {
                false
            }
        }
        ClipShape::Polygon { points, nonzero } => {
            if *nonzero {
                polygon_contains_nonzero(points, ox, oy)
            } else {
                polygon_contains(points, ox, oy)
            }
        }
    }
}

/// even-odd 規則（既定のfill-rule）での内外判定。自己交差の無い多角形では
/// nonzero と同じ結果になるが、自己交差する多角形では領域の解釈が異なる。
fn polygon_contains(points: &[(i32, i32)], px: i32, py: i32) -> bool {
    let n = points.len();
    if n < 3 { return false; }
    let mut inside = false;
    let mut j = n - 1;
    for i in 0..n {
        let (xi, yi) = points[i];
        let (xj, yj) = points[j];
        if (yi > py) != (yj > py) && yj != yi {
            let x_intersect = (xj - xi) * (py - yi) / (yj - yi) + xi;
            if px < x_intersect {
                inside = !inside;
            }
        }
        j = i;
    }
    inside
}

/// nonzero 規則（`clip-path: polygon(nonzero, ...)`）での内外判定。各辺との交差方向
/// （上向き/下向き）を winding number として加減算し、合計が0でなければ内側とする
/// （自己交差する多角形で even-odd と異なる結果を返す標準的な winding-number 法）。
fn polygon_contains_nonzero(points: &[(i32, i32)], px: i32, py: i32) -> bool {
    let n = points.len();
    if n < 3 { return false; }
    let mut winding = 0i32;
    let mut j = n - 1;
    for i in 0..n {
        let (xi, yi) = points[i];
        let (xj, yj) = points[j];
        if yj <= py {
            if yi > py {
                // 上向きの辺がレイキャストを横切るか
                let cross = (xi - xj) * (py - yj) - (px - xj) * (yi - yj);
                if cross > 0 {
                    winding += 1;
                }
            }
        } else if yi <= py {
            // 下向きの辺がレイキャストを横切るか
            let cross = (xi - xj) * (py - yj) - (px - xj) * (yi - yj);
            if cross < 0 {
                winding -= 1;
            }
        }
        j = i;
    }
    winding != 0
}

/// `circle()`/`ellipse()` の `at <cx> <cy>` 位置トークンを解決する。`%`/`px`/数値に
/// 加え、`left`/`top`/`right`/`bottom`/`center` のキーワードにも対応する（以前は
/// `clip_len` が数値/単位しか扱えず、キーワードは `s.parse::<f32>()` に失敗して
/// 静かに `0` へフォールバックしていた。`circle(50% at right)` が `cx=w` ではなく
/// `cx=0` になる等、位置が壊れるバグがあった）。
fn clip_pos(s: &str, base: i32) -> i32 {
    match s.trim().to_ascii_lowercase().as_str() {
        "left" | "top" => 0,
        "right" | "bottom" => base,
        "center" => base / 2,
        _ => clip_len(s, base) as i32,
    }
}

fn clip_len(s: &str, base: i32) -> f32 {
    let s = s.trim();
    if let Some(pct) = s.strip_suffix('%') {
        pct.trim().parse::<f32>().unwrap_or(50.0) * base as f32 / 100.0
    } else if let Some(px) = s.strip_suffix("px") {
        px.trim().parse::<f32>().unwrap_or(0.0)
    } else {
        s.parse::<f32>().unwrap_or(0.0)
    }
}

/// 点 `(px, py)`（要素ローカル座標）が角丸矩形の内側にあるかを返す。
/// `w`, `h` は要素サイズ、`r` は border-radius（ピクセル）。
/// 計算量: **O(1)** — 4 隅の楕円判定のみ。
///
/// ただし**毎ピクセル呼ばれる**使い方をしているため、
/// 角丸付き背景の塗りは全体で O(W×H) になる。
/// 本来は 4 隅だけ判定し、内側は矩形として一括で塗れる
/// （このページでは当該分岐に入らないため未着手。実測 `rrect=0`）。
pub fn point_in_rounded_rect(px: i32, py: i32, w: i32, h: i32, r: (i32, i32, i32, i32)) -> bool {
    if px < 0 || py < 0 || px >= w || py >= h {
        return false;
    }
    
    let tl = r.0.min(w / 2).min(h / 2).max(0);
    let tr = r.1.min(w / 2).min(h / 2).max(0);
    let br = r.2.min(w / 2).min(h / 2).max(0);
    let bl = r.3.min(w / 2).min(h / 2).max(0);

    if tl > 0 && px < tl && py < tl {
        let dx = (px - tl) as i64;
        let dy = (py - tl) as i64;
        return dx * dx + dy * dy <= (tl as i64) * (tl as i64);
    }
    if tr > 0 && px >= w - tr && py < tr {
        let dx = (px - (w - tr)) as i64;
        let dy = (py - tr) as i64;
        return dx * dx + dy * dy <= (tr as i64) * (tr as i64);
    }
    if bl > 0 && px < bl && py >= h - bl {
        let dx = (px - bl) as i64;
        let dy = (py - (h - bl)) as i64;
        return dx * dx + dy * dy <= (bl as i64) * (bl as i64);
    }
    if br > 0 && px >= w - br && py >= h - br {
        let dx = (px - (w - br)) as i64;
        let dy = (py - (h - br)) as i64;
        return dx * dx + dy * dy <= (br as i64) * (br as i64);
    }
    true
}

pub fn draw_gradation(
    screen: &crate::kernel::draw::Screen,
    x0: i32,
    y0: i32,
    w: i32,
    h: i32,
    c1: u32,
    c2: u32,
) {
    let r1 = ((c1 >> 16) & 0xFF) as f32;
    let g1 = ((c1 >> 8) & 0xFF) as f32;
    let b1 = (c1 & 0xFF) as f32;

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

    for dy in 0..h {
        let py = y0 + dy;
        let t = dy as f32 / h as f32;
        let r = ((1.0 - t) * r1 + t * r2) as u32;
        let g = ((1.0 - t) * g1 + t * g2) as u32;
        let b = ((1.0 - t) * b1 + t * b2) as u32;
        let c = 0xFF000000 | (r << 16) | (g << 8) | b;
        screen.boxfill(
            x0 as u32,
            py as u32,
            (x0 + w) as u32,
            (py + 1) as u32,
            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;
    if length <= 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;
    }

    // 【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);

    for y in 0..h {
        let py = y0 + y;
        let p_y = (y as f32) * dy;

        if axis == Axis::Vertical {
            // この行は単色。アルファが不透明なら矩形塗りで一気に埋める。
            let t = (p_y - min_proj) / length;
            let color = lut[lut_index(t, lut_n)];
            let alpha = ((color >> 24) & 0xFF) as u8;
            if alpha == 0xFF {
                screen.boxfill(
                    x0 as u32,
                    py as u32,
                    (x0 + w) as u32,
                    (py + 1) as u32,
                    crate::kernel::draw::Color(color),
                );
            } else {
                // 半透明は下地との合成が要るので従来どおりピクセル単位（G-4）。
                for x in 0..w {
                    screen.draw_pixel_alpha(
                        (x0 + x) as u32,
                        py as u32,
                        crate::kernel::draw::Color(color),
                        alpha,
                    );
                }
            }
            continue;
        }

        for x in 0..w {
            let px = x0 + x;
            let p_x = (x as f32) * dx;
            let p = p_x + p_y;
            let t = (p - min_proj) / length;

            let color = lut[lut_index(t, lut_n)];
            let alpha = ((color >> 24) & 0xFF) as u8;
            screen.draw_pixel_alpha(px as u32, py as u32, crate::kernel::draw::Color(color), alpha);
        }
    }
}

/// `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
    };

    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);
        for col in 0..box_w {
            if clip_s
                .as_ref()
                .map(|cs| !clip_inside(cs, col as i32, row as i32))
                .unwrap_or(false)
            {
                continue;
            }
            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 {
                        continue;
                    }
                    m
                }
                _ => rel_x.rem_euclid(draw_w_eff as i32),
            };
            if sample_x < 0 || sample_x >= draw_w_eff as i32 {
                continue;
            }
            let src_col = (sample_x as u32 * img.width) / draw_w_eff.max(1);
            let idx = ((src_row * img.width + 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 a = img.rgba[idx + 3];
                // `background-blend-mode`: 画像ピクセルを `background-color` に対して
                // `mix-blend-mode` と同じ `blend_pixel` でブレンドする（"normal"/未指定は
                // 従来通りの単純アルファ合成のまま）。
                if !el.background_blend_mode.is_empty()
                    && el.background_blend_mode != "normal"
                {
                    if let Some(bg) = el.bg_color {
                        let dst = (
                            ((bg >> 16) & 0xFF) as u8,
                            ((bg >> 8) & 0xFF) as u8,
                            (bg & 0xFF) as u8,
                        );
                        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 + col, y0_rect as u32 + row, 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);
    match style {
        "dotted" => {
            let mut x = x0;
            while x < x1 {
                let seg_end = (x + 2).min(x1);
                screen.boxfill(x, y, seg_end, y + t, crate::kernel::draw::Color(color));
                x += 4;
            }
        }
        "dashed" => {
            let mut x = x0;
            while x < x1 {
                let seg_end = (x + 5).min(x1);
                screen.boxfill(x, y, seg_end, y + t, crate::kernel::draw::Color(color));
                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 + 1, py + t, crate::kernel::draw::Color(color));
            }
        }
        "double" => {
            screen.boxfill(x0, y, x1, y + t, crate::kernel::draw::Color(color));
            let y2 = y + t + 2;
            screen.boxfill(x0, y2, x1, y2 + t, crate::kernel::draw::Color(color));
        }
        _ => {
            screen.boxfill(x0, y, x1, y + t, crate::kernel::draw::Color(color));
        }
    }
}

/// 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 と異なりタイリングはしない（範囲外は透過のまま何も描かない）。
/// CSS `filter` の1関数トークン（例 "grayscale(1)"）を (種別文字列, 引数) にパースする。
/// 引数省略時は 1.0（各フィルタの完全適用値）とする。`%` サフィックスは 0-1 に正規化。
fn parse_filter_tokens(filter: &str) -> alloc::vec::Vec<(alloc::string::String, f32)> {
    let mut out = alloc::vec::Vec::new();
    let lower = filter.to_ascii_lowercase();
    let mut rest = lower.as_str();
    #[allow(clippy::string_slice)] // find() で ASCII バイト位置を特定済み
    while let Some(paren) = rest.find('(') {
        let name = rest[..paren].trim();
        if name.is_empty() {
            break;
        }
        let Some(close) = rest[paren..].find(')') else {
            break;
        };
        let arg = rest[paren + 1..paren + close].trim();
        // 引数省略時の既定値: `grayscale()`/`invert()`/`sepia()`/`contrast()`/`brightness()`/
        // `saturate()` は仕様上 100%(=1.0) だが、`hue-rotate()` だけは角度(deg)であり
        // 仕様上の既定は 0deg。以前は他の関数と同じ `unwrap_or(1.0)` フォールバックを
        // 共有していたため `hue-rotate()`（引数省略）が誤って1度回転してしまうバグがあった。
        let empty_default = if name == "hue-rotate" { 0.0 } else { 1.0 };
        let value = if arg.is_empty() {
            empty_default
        } else if let Some(pct) = arg.strip_suffix('%') {
            pct.parse::<f32>().unwrap_or(100.0) / 100.0
        } else if let Some(deg) = arg.strip_suffix("deg") {
            deg.parse::<f32>().unwrap_or(0.0)
        } else if let Some(px) = arg.strip_suffix("px") {
            px.parse::<f32>().unwrap_or(0.0)
        } else {
            arg.parse::<f32>().unwrap_or(empty_default)
        };
        out.push((alloc::string::String::from(name), value));
        rest = &rest[paren + close + 1..];
    }
    out
}

/// `filter` 文字列から `blur(Npx)` の半径を px 単位で抽出する（無ければ 0）。
/// パフォーマンス上の理由で半径は 1〜8px にクランプする簡略実装（ボックスブラー1回のみ、
/// 実ブラウザのようなガウシアン近似の複数パスは行わない）。
pub(crate) fn parse_blur_radius(filter: &str) -> i32 {
    let lower = filter.to_ascii_lowercase();
    let Some(start) = lower.find("blur(") else {
        return 0;
    };
    #[allow(clippy::string_slice)] // find() で ASCII バイト位置を特定済み
    let rest = &lower[start + 5..];
    let Some(close) = rest.find(')') else {
        return 0;
    };
    #[allow(clippy::string_slice)]
    let arg = rest[..close].trim();
    let num = arg.strip_suffix("px").unwrap_or(arg).trim();
    match num.parse::<f32>() {
        Ok(v) => (v.max(0.0) as i32).clamp(0, 8),
        Err(_) => 0,
    }
}

/// `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);
        }
    }
}

/// grayscale/brightness/invert/sepia/contrast/saturate を順に適用する（blur/hue-rotate 等の非対応関数は無視）。
pub(crate) fn apply_css_filters(filter: &str, r: u8, g: u8, b: u8) -> (u8, u8, u8) {
    if filter.is_empty() {
        return (r, g, b);
    }
    let (mut rf, mut gf, mut bf) = (r as f32, g as f32, b as f32);
    for (name, amount) in parse_filter_tokens(filter) {
        match name.as_str() {
            "grayscale" => {
                let amount = amount.clamp(0.0, 1.0);
                let gray = 0.299 * rf + 0.587 * gf + 0.114 * bf;
                rf = rf + (gray - rf) * amount;
                gf = gf + (gray - gf) * amount;
                bf = bf + (gray - bf) * amount;
            }
            "brightness" => {
                let amount = amount.max(0.0);
                rf *= amount;
                gf *= amount;
                bf *= amount;
            }
            "invert" => {
                let amount = amount.clamp(0.0, 1.0);
                rf = rf + (255.0 - rf - rf) * amount;
                gf = gf + (255.0 - gf - gf) * amount;
                bf = bf + (255.0 - bf - bf) * amount;
            }
            "sepia" => {
                let amount = amount.clamp(0.0, 1.0);
                let sr = 0.393 * rf + 0.769 * gf + 0.189 * bf;
                let sg = 0.349 * rf + 0.686 * gf + 0.168 * bf;
                let sb = 0.272 * rf + 0.534 * gf + 0.131 * bf;
                rf = rf + (sr - rf) * amount;
                gf = gf + (sg - gf) * amount;
                bf = bf + (sb - bf) * amount;
            }
            "contrast" => {
                let amount = amount.max(0.0);
                rf = (rf - 128.0) * amount + 128.0;
                gf = (gf - 128.0) * amount + 128.0;
                bf = (bf - 128.0) * amount + 128.0;
            }
            "saturate" => {
                let amount = amount.max(0.0);
                let gray = 0.299 * rf + 0.587 * gf + 0.114 * bf;
                rf = gray + (rf - gray) * amount;
                gf = gray + (gf - gray) * amount;
                bf = gray + (bf - gray) * amount;
            }
            "hue-rotate" => {
                let deg = amount;
                
                let r = rf / 255.0;
                let g = gf / 255.0;
                let b = bf / 255.0;
                
                let max = r.max(g).max(b);
                let min = r.min(g).min(b);
                let l = (max + min) / 2.0;
                
                let (mut h, s) = if max == min {
                    (0.0, 0.0)
                } else {
                    let d = max - min;
                    let s = if l > 0.5 { d / (2.0 - max - min) } else { d / (max + min) };
                    let mut h = if max == r {
                        (g - b) / d + (if g < b { 6.0 } else { 0.0 })
                    } else if max == g {
                        (b - r) / d + 2.0
                    } else {
                        (r - g) / d + 4.0
                    };
                    h /= 6.0;
                    (h, s)
                };
                
                // hue-rotate
                h = (h * 360.0 + deg) % 360.0;
                if h < 0.0 { h += 360.0; }
                h /= 360.0;
                
                let hue2rgb = |p: f32, q: f32, mut t: f32| -> f32 {
                    if t < 0.0 { t += 1.0; }
                    if t > 1.0 { t -= 1.0; }
                    if t < 1.0 / 6.0 { return p + (q - p) * 6.0 * t; }
                    if t < 1.0 / 2.0 { return q; }
                    if t < 2.0 / 3.0 { return p + (q - p) * (2.0 / 3.0 - t) * 6.0; }
                    p
                };
                
                if s == 0.0 {
                    rf = l * 255.0;
                    gf = l * 255.0;
                    bf = l * 255.0;
                } else {
                    let q = if l < 0.5 { l * (1.0 + s) } else { l + s - l * s };
                    let p = 2.0 * l - q;
                    rf = hue2rgb(p, q, h + 1.0 / 3.0) * 255.0;
                    gf = hue2rgb(p, q, h) * 255.0;
                    bf = hue2rgb(p, q, h - 1.0 / 3.0) * 255.0;
                }
            }
            _ => {} // blur / drop-shadow 等は非対応につき無視
        }
    }
    (
        rf.clamp(0.0, 255.0) as u8,
        gf.clamp(0.0, 255.0) as u8,
        bf.clamp(0.0, 255.0) as u8,
    )
}

/// 0xAARRGGBB 形式の色に `apply_css_filters` を適用する（alpha は変更しない）。
pub(crate) fn apply_css_filters_argb(filter: &str, argb: u32) -> u32 {
    if filter.is_empty() {
        return argb;
    }
    let a = argb & 0xFF000000;
    let r = ((argb >> 16) & 0xFF) as u8;
    let g = ((argb >> 8) & 0xFF) as u8;
    let b = (argb & 0xFF) as u8;
    let (r2, g2, b2) = apply_css_filters(filter, r, g, b);
    a | ((r2 as u32) << 16) | ((g2 as u32) << 8) | (b2 as u32)
}

/// `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);

    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 {
                continue;
            }
            if clip_s
                .as_ref()
                .map(|cs| !clip_inside(cs, px, py))
                .unwrap_or(false)
            {
                continue;
            }
            let is_pixelated = el.image_rendering == "pixelated" || el.image_rendering == "crisp-edges";
            let (raw_r, raw_g, raw_b, a) = if is_pixelated || (draw_w == img.width && draw_h == img.height) {
                let src_col = (col * img.width) / draw_w.max(1);
                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)
            };
            let (r, g, b) = apply_css_filters(&el.filter, raw_r, raw_g, raw_b);
            if a > 0 {
                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 + px as u32, y0_rect as u32 + py as u32, color, a);
            }
        }
    }
}

/// 計算量: **O(1)** — 近傍 4 点の読み出しと 2 段補間。
/// 最近傍サンプリングの約 4 倍の定数倍。**毎ピクセル呼ばれる**。
pub(super) fn sample_bilinear_rgba(img: &super::DecodedImage, u: f32, v: f32) -> (u8, u8, u8, u8) {
    if img.width == 0 || img.height == 0 || img.rgba.len() < (img.width * img.height * 4) as usize {
        return (0, 0, 0, 0);
    }
    let x = u.clamp(0.0, (img.width - 1) as f32);
    let y = v.clamp(0.0, (img.height - 1) as f32);
    let x0 = x as u32;
    let y0 = y as u32;
    let x1 = (x0 + 1).min(img.width - 1);
    let y1 = (y0 + 1).min(img.height - 1);
    let fx = x - (x0 as f32);
    let fy = y - (y0 as f32);

    let get_pixel = |px: u32, py: u32| {
        let idx = ((py * img.width + px) as usize) * 4;
        (img.rgba[idx] as f32, img.rgba[idx + 1] as f32, img.rgba[idx + 2] as f32, img.rgba[idx + 3] as f32)
    };

    let p00 = get_pixel(x0, y0);
    let p10 = get_pixel(x1, y0);
    let p01 = get_pixel(x0, y1);
    let p11 = get_pixel(x1, y1);

    let w00 = (1.0 - fx) * (1.0 - fy);
    let w10 = fx * (1.0 - fy);
    let w01 = (1.0 - fx) * fy;
    let w11 = fx * fy;

    let r = (p00.0 * w00 + p10.0 * w10 + p01.0 * w01 + p11.0 * w11) as u8;
    let g = (p00.1 * w00 + p10.1 * w10 + p01.1 * w01 + p11.1 * w11) as u8;
    let b = (p00.2 * w00 + p10.2 * w10 + p01.2 * w01 + p11.2 * w11) as u8;
    let a = (p00.3 * w00 + p10.3 * w10 + p01.3 * w01 + p11.3 * w11) as u8;
    (r, g, b, a)
}