﻿/* ===========================================================
   苦力怕的文件夹的个人主页 — 公共样式
   所有语言版本（index / cn-tw / en / ja / ko / es / fr / de / pt / ru）共用本文件
   双主题：苦力怕绿（默认）/ 末影人紫
   切换方式：theme.js 改写 <html data-theme="green|purple">，本文件用变量接管配色
   =========================================================== */

/* ===========================================================
   主题 1：苦力怕绿（默认，:root 与 data-theme="green" 同色板）
   所有颜色都收敛成变量，下面的规则只引用 var()，不再写死颜色
   =========================================================== */
:root, [data-theme="green"]{
    color-scheme:dark;

    /* —— 品牌色：RGB 分量，便于叠加不同透明度 —— */
    --creeper-rgb:76,175,80;
    --lime-rgb:124,252,0;
    --sky-rgb:56,189,248;
    --earth-rgb:217,154,91;
    --dim-rgb:130,138,141;

    /* —— 品牌色：实色 —— */
    --creeper:#4CAF50;
    --lime:#7CFC00;
    --sky:#38bdf8;              /* 蓝色点缀 */
    --alice:aliceblue;          /* 正文文字 */
    --dim:#828a8d;              /* 次要文字 */
    --earth:#d99a5b;            /* 副标题（由原 brown 提亮，保证深色下可读）*/
    --link-hover:#eaffe0;       /* 视频标题悬停文字 */

    /* —— 背景：底色 + 三团光晕 + 纵向渐变 —— */
    --bg-base:#04060a;
    --bg-a:#04060a;
    --bg-b:#070f0b;
    --bg-c:#04070a;
    --glow-1:rgba(76,175,80,.26);
    --glow-2:rgba(56,189,248,.14);
    --glow-3:rgba(124,252,0,.10);

    /* —— 星空 / 像素网格 —— */
    --star-1:#ffffff;
    --star-2:rgba(214,255,214,.95);
    --star-3:rgba(255,255,255,.8);
    --star-4:rgba(124,252,0,.9);
    --star-5:rgba(56,189,248,.8);
    --star-6:rgba(255,255,255,.7);
    --grid-line:rgba(124,252,0,.055);

    /* —— 卡片 / 面板 / 边框 —— */
    --line:rgba(124,252,0,.22);
    --glass:linear-gradient(158deg,rgba(24,42,30,.66),rgba(7,13,11,.78));
    --panel-a:rgba(10,20,14,.78);
    --panel-b:rgba(12,26,16,.88);
    --panel-c:rgba(8,16,12,.8);
    --card-a:rgba(22,38,28,.72);
    --card-b:rgba(8,14,12,.82);
    --chip-a:rgba(10,20,14,.72);
    --chip-b:rgba(12,26,16,.86);

    /* —— 语言条「当前语言」选中态 —— */
    --pill-a:#7CFC00;
    --pill-b:#4CAF50;
    --on-accent:#06130a;        /* 亮色底上的文字（深墨绿） */

    /* —— 滚动条 —— */
    --scroll-track:#060b08;
    --scroll-thumb-a:#7CFC00;
    --scroll-thumb-b:#3c8a3f;
    --scroll-thumb-hover-a:#a8ff5f;
    --scroll-thumb-hover-b:#4CAF50;

    /* —— 头部像素方块（苦力怕头像的光斑）—— */
    --block-a:#8ef24f;
    --block-b:#2e7d32;
    --block-face:#0e2412;
    --face-eye:#0e2412;  /* green: dark eye holes */

    /* —— 主题切换按钮 —— */
    --toggle-bg:rgba(6,12,9,.86);
}

/* ===========================================================
   主题 2：末影人紫（深邃的末地夜空 + 紫色附魔光）
   对比度：正文 14:1 以上，次要文字 7:1 左右，全部在深紫底上可读
   =========================================================== */
html[data-theme="purple"]{
    color-scheme:dark;

    /* —— 品牌色：RGB 分量 —— */
    --creeper-rgb:123,47,190;   /* #7B2FBE 末影人紫（主色）*/
    --lime-rgb:176,124,232;     /* #B07CE8 亮紫（替代亮绿，做高光/悬停）*/
    --sky-rgb:206,150,255;      /* #CE96FF 淡紫（替代 #38bdf8 蓝色点缀）*/
    --earth-rgb:210,162,247;
    --dim-rgb:161,150,184;

    /* —— 品牌色：实色 —— */
    --creeper:#7B2FBE;
    --lime:#B07CE8;
    --sky:#CE96FF;
    --alice:#EFE6FB;            /* 淡紫白，正文对比度约 16:1 */
    --dim:#A196B8;              /* 灰紫，次要文字对比度约 7:1 */
    --earth:#D2A2F7;
    --link-hover:#F3E6FF;

    /* —— 背景：末地夜空 —— */
    --bg-base:#08050f;
    --bg-a:#08050f;
    --bg-b:#0f0619;
    --bg-c:#07040d;
    --glow-1:rgba(123,47,190,.32);
    --glow-2:rgba(176,124,232,.15);
    --glow-3:rgba(206,150,255,.10);

    /* —— 星空 / 像素网格 —— */
    --star-1:#ffffff;
    --star-2:rgba(233,214,255,.95);
    --star-3:rgba(255,255,255,.8);
    --star-4:rgba(206,150,255,.9);
    --star-5:rgba(176,124,232,.8);
    --star-6:rgba(255,255,255,.7);
    --grid-line:rgba(176,124,232,.06);

    /* —— 卡片 / 面板 / 边框 —— */
    --line:rgba(176,124,232,.26);
    --glass:linear-gradient(158deg,rgba(38,20,60,.68),rgba(10,6,18,.80));
    --panel-a:rgba(26,13,42,.78);
    --panel-b:rgba(35,17,56,.88);
    --panel-c:rgba(20,10,34,.8);
    --card-a:rgba(32,16,52,.72);
    --card-b:rgba(14,8,24,.82);
    --chip-a:rgba(26,13,42,.72);
    --chip-b:rgba(35,17,56,.86);

    /* —— 语言条「当前语言」选中态（深紫底 + 白字，对比度 7:1 以上）—— */
    --pill-a:#8E44D6;
    --pill-b:#5B2191;
    --on-accent:#FFFFFF;

    /* —— 滚动条 —— */
    --scroll-track:#0c0716;
    --scroll-thumb-a:#9B59D0;
    --scroll-thumb-b:#5B2191;
    --scroll-thumb-hover-a:#C08CF0;
    --scroll-thumb-hover-b:#7B2FBE;

    /* —— 头部像素方块（紫色末影方块）—— */
    --block-a:#26203D;
    --block-b:#0B0B14;
    --block-face:#0A0614;
    --face-eye:#E079FA;  /* enderman glowing eyes */

    /* —— 主题切换按钮 —— */
    --toggle-bg:rgba(16,9,26,.86);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* ===== 滚动条（跟随主题）===== */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--scroll-thumb-a),var(--scroll-thumb-b));
    border:2px solid var(--scroll-track);
    border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,var(--scroll-thumb-hover-a),var(--scroll-thumb-hover-b));
}
::-webkit-scrollbar-corner{background:var(--scroll-track)}
/* Firefox 走标准属性（只在 Gecko 生效，避免和上面的 WebKit 伪元素互相顶掉）*/
@supports (-moz-appearance:none){
    html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb-b) var(--scroll-track)}
}

/* ===== 选中文字 ===== */
::selection{background:rgba(var(--lime-rgb),.32);color:var(--alice)}

/* ===== 背景：深色渐变 + 星空 + 像素网格 ===== */
body{
    margin:0;
    min-height:100vh;
    /* 底部多留 34px，给右下角的主题切换按钮腾位置，正文不会被它压住 */
    padding:clamp(14px,3vw,40px) clamp(10px,2.6vw,32px) calc(clamp(40px,6vw,80px) + 34px);
    color:var(--alice);
    background-color:var(--bg-base);
    background-image:
        radial-gradient(1200px 620px at 50% -12%, var(--glow-1), transparent 72%),
        radial-gradient(900px 520px at 8% 108%, var(--glow-2), transparent 72%),
        radial-gradient(700px 420px at 96% 28%, var(--glow-3), transparent 72%),
        linear-gradient(180deg,var(--bg-a) 0%,var(--bg-b) 52%,var(--bg-c) 100%);
    background-attachment:fixed;
    /* 多语言字体栈：中 / 日 / 韩 / 西里尔 / 拉丁 都能取到合适的字形 */
    font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",
        "Yu Gothic UI","Meiryo UI","Malgun Gothic","Apple SD Gothic Neo",
        "Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
    text-align:center;
    line-height:1.6;
    overflow-x:hidden;
}
body::before{ /* 星空 */
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
        radial-gradient(1.6px 1.6px at 18px 24px,var(--star-1),transparent 60%),
        radial-gradient(1.3px 1.3px at 132px 88px,var(--star-2),transparent 60%),
        radial-gradient(1.8px 1.8px at 62px 168px,var(--star-3),transparent 60%),
        radial-gradient(1.2px 1.2px at 208px 44px,var(--star-4),transparent 60%),
        radial-gradient(1.4px 1.4px at 96px 232px,var(--star-5),transparent 60%),
        radial-gradient(1.1px 1.1px at 168px 132px,var(--star-6),transparent 60%);
    background-size:240px 240px,300px 300px,360px 360px,420px 420px,300px 300px,480px 480px;
    opacity:.5;
    animation:twinkle 7s ease-in-out infinite alternate;
}
body::after{ /* 像素网格 */
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
        repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 34px),
        repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 34px);
    -webkit-mask-image:radial-gradient(circle at 50% 26%,#000 0%,rgba(0,0,0,.35) 52%,transparent 82%);
    mask-image:radial-gradient(circle at 50% 26%,#000 0%,rgba(0,0,0,.35) 52%,transparent 82%);
    opacity:.6;
}
@keyframes twinkle{from{opacity:.28}to{opacity:.72}}

/* ===== 玻璃拟态主卡片 ===== */
.page{
    position:relative;z-index:1;
    width:min(1060px,100%);
    margin:0 auto;
    padding:clamp(18px,3.4vw,46px);
    border:1px solid var(--line);
    border-radius:26px;
    background:var(--glass);
    box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
    -webkit-backdrop-filter:blur(12px) saturate(125%);
    backdrop-filter:blur(12px) saturate(125%);
}

/* ===== 排版 ===== */
h1,h2,h3,h6{font-weight:700}
h1{
    margin:.4em 0 .3em;
    font-size:clamp(1.5rem,4.6vw,2.3rem);
    line-height:1.28;
    color:var(--alice);
    letter-spacing:.01em;
    text-shadow:0 0 10px rgba(var(--lime-rgb),.8),0 0 26px rgba(var(--creeper-rgb),.5),0 0 48px rgba(var(--sky-rgb),.22);
    animation:neon 4.5s ease-in-out infinite;
}
@keyframes neon{
    0%,100%{text-shadow:0 0 10px rgba(var(--lime-rgb),.75),0 0 24px rgba(var(--creeper-rgb),.45),0 0 46px rgba(var(--sky-rgb),.2)}
    50%    {text-shadow:0 0 16px rgba(var(--lime-rgb),1),0 0 36px rgba(var(--lime-rgb),.6),0 0 66px rgba(var(--sky-rgb),.35)}
}
h2{
    margin:.5em auto .2em;
    max-width:36em;
    font-size:clamp(.98rem,2.5vw,1.35rem);
    color:var(--earth);
    text-shadow:0 0 10px rgba(var(--earth-rgb),.5),0 0 26px rgba(var(--earth-rgb),.2);
}
h2 u{
    color:var(--lime);
    text-decoration-color:rgba(var(--lime-rgb),.55);
    text-underline-offset:4px;
    text-shadow:0 0 12px rgba(var(--lime-rgb),.65);
}
h3{
    margin:.55em 0;
    font-size:clamp(1rem,2.4vw,1.28rem);
    color:var(--sky);
    text-shadow:0 0 10px rgba(var(--sky-rgb),.55),0 0 26px rgba(var(--sky-rgb),.22);
}
h6{
    margin:.25em 0;
    font-size:clamp(.72rem,1.7vw,.82rem);
    font-weight:400;
    letter-spacing:.02em;
    color:var(--dim);
    text-shadow:0 0 10px rgba(var(--dim-rgb),.5);
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:14px}
img{max-width:100%}

/* ===== 头部：像素方块 + 发光圆形头像 ===== */
.hero{padding:clamp(4px,1.6vw,16px) 0 clamp(12px,2.6vw,26px)}
.creeper{
    position:relative;
    width:48px;height:48px;
    margin:0 auto 18px;
    border-radius:6px;
    background:linear-gradient(135deg,var(--block-a),var(--block-b));
    box-shadow:0 0 26px rgba(var(--lime-rgb),.5),inset 0 0 0 2px rgba(0,0,0,.28);
    animation:float 5s ease-in-out infinite;
    image-rendering:pixelated;
}
.creeper::before{ /* 8x8 像素脸（6px 一格） */
    content:"";position:absolute;left:0;top:0;width:6px;height:6px;
    box-shadow:
        6px 6px 0 0 var(--block-face),12px 6px 0 0 var(--block-face),30px 6px 0 0 var(--block-face),36px 6px 0 0 var(--block-face),
        6px 12px 0 0 var(--block-face),12px 12px 0 0 var(--block-face),30px 12px 0 0 var(--block-face),36px 12px 0 0 var(--block-face),
        18px 18px 0 0 var(--block-face),24px 18px 0 0 var(--block-face),
        12px 24px 0 0 var(--block-face),18px 24px 0 0 var(--block-face),24px 24px 0 0 var(--block-face),30px 24px 0 0 var(--block-face),
        12px 30px 0 0 var(--block-face),30px 30px 0 0 var(--block-face),
        12px 36px 0 0 var(--block-face),30px 36px 0 0 var(--block-face);
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.avatar{
    display:block;
    width:clamp(96px,22vw,132px);
    height:clamp(96px,22vw,132px);
    margin:0 auto clamp(6px,1.6vw,14px);
    padding:0;
    border-radius:50%;
    object-fit:cover;
    image-rendering:pixelated;      /* 16x16 图标放大后保持像素锐利 */
    border:3px solid rgba(var(--lime-rgb),.65);
    background:radial-gradient(circle at 50% 35%,rgba(var(--lime-rgb),.25),rgba(0,0,0,.6));
    box-shadow:0 0 0 6px rgba(var(--lime-rgb),.08),0 0 34px rgba(var(--lime-rgb),.45),0 14px 30px rgba(0,0,0,.55);
    cursor:pointer;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
    animation:breathe 4.5s ease-in-out infinite;
}
.avatar:hover{
    transform:scale(1.06) rotate(-2deg);
    border-color:var(--lime);
    box-shadow:0 0 0 9px rgba(var(--lime-rgb),.14),0 0 58px rgba(var(--lime-rgb),.7),0 18px 38px rgba(0,0,0,.6);
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* ===== 三个入口：大号悬浮按钮卡片 ===== */
.platforms{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(10px,1.7vw,18px);
    margin:clamp(12px,2.6vw,24px) 0 clamp(16px,2.8vw,28px);
}
.platforms a{
    display:flex;align-items:center;justify-content:center;
    min-height:clamp(84px,12vw,112px);
    padding:16px 14px;
    border:1px solid rgba(var(--lime-rgb),.28);
    border-radius:18px;
    background:linear-gradient(160deg,rgba(var(--creeper-rgb),.18),var(--panel-a));
    box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s;
}
.platforms a:hover,.platforms a:focus-visible{
    transform:translateY(-6px);
    border-color:var(--lime);
    background:linear-gradient(160deg,rgba(var(--lime-rgb),.26),var(--panel-b));
    box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 36px rgba(var(--lime-rgb),.35);
}
.platforms h3{margin:0;font-size:clamp(.95rem,2.2vw,1.22rem)}

/* ===== 号召条 ===== */
.cta{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:10px clamp(10px,1.8vw,18px);
    margin:clamp(14px,2.8vw,26px) 0;
}
.cta h1{
    margin:0;
    padding:.35em 1.1em;
    font-size:clamp(.92rem,2.3vw,1.35rem);
    border:1px dashed rgba(var(--lime-rgb),.4);
    border-radius:999px;
    background:rgba(var(--lime-rgb),.07);
    animation:none;
    text-shadow:0 0 12px rgba(var(--lime-rgb),.8),0 0 30px rgba(var(--creeper-rgb),.45);
    transition:transform .3s,border-color .3s,background .3s;
}
.cta h1:hover{transform:translateY(-4px);border-color:var(--lime);background:rgba(var(--lime-rgb),.14)}

/* ===== 平台横幅图 ===== */
.banners{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(10px,1.7vw,18px);
    margin:clamp(12px,2.4vw,22px) 0;
}
.banners a{
    display:flex;align-items:center;justify-content:center;
    aspect-ratio:16/10;
    padding:8px;
    border:1px solid rgba(var(--lime-rgb),.2);
    border-radius:18px;
    background:linear-gradient(160deg,rgba(var(--creeper-rgb),.12),var(--panel-c));
    box-shadow:0 10px 26px rgba(0,0,0,.45);
    overflow:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.banners a:hover{transform:translateY(-6px);border-color:var(--lime);box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 34px rgba(var(--lime-rgb),.32)}
.banners img{
    width:100%;height:100%;
    object-fit:contain;                 /* 三张图比例不同，完整显示不裁切 */
    border-radius:12px;
    transition:transform .45s,filter .45s;
}
.banners a:hover img{transform:scale(1.04);filter:brightness(1.06) saturate(1.08)}

/* ===== 视频列表 ===== */
.spacer{display:block;height:0;margin:0;padding:0;overflow:hidden;font-size:0;line-height:0}
.section-title{position:relative;margin-top:.6em}
.section-title::after{
    content:"";display:block;width:88px;height:6px;margin:.5em auto 0;
    background:
        linear-gradient(90deg,var(--lime) 0 22px,transparent 22px 33px,var(--creeper) 33px 55px,transparent 55px 66px,var(--sky) 66px 88px);
    box-shadow:0 0 16px rgba(var(--lime-rgb),.6);
    border-radius:2px;
}
.section-sub{margin-top:.4em;margin-bottom:0}
.videos{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:clamp(14px,2.2vw,24px);
    margin-top:clamp(16px,3vw,28px);
}
.video{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:clamp(10px,1.7vw,16px);
    border:1px solid rgba(var(--lime-rgb),.16);
    border-radius:18px;
    background:linear-gradient(165deg,var(--card-a),var(--card-b));
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.video:hover{transform:translateY(-6px);border-color:rgba(var(--lime-rgb),.5);box-shadow:0 22px 48px rgba(0,0,0,.58),0 0 30px rgba(var(--creeper-rgb),.25)}
.video-title{display:block;width:100%}
.video-title h1{
    margin:.15em 0;
    font-size:clamp(.95rem,2.1vw,1.12rem);
    line-height:1.45;
    animation:none;
    text-shadow:0 0 10px rgba(var(--lime-rgb),.6),0 0 24px rgba(var(--creeper-rgb),.35);
    transition:color .3s,text-shadow .3s;
}
.video-title:hover h1{color:var(--link-hover);text-shadow:0 0 14px rgba(var(--lime-rgb),.95),0 0 34px rgba(var(--lime-rgb),.5)}
.video h6{margin:0}
.video-thumb{
    display:block;width:100%;line-height:0;
    border-radius:13px;overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.video-thumb img{
    display:block;width:100%;height:auto;
    aspect-ratio:555/313;
    object-fit:cover;
    transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;
}
.video-thumb:hover img{transform:scale(1.05);filter:brightness(1.06) saturate(1.1)}

/* ===== 语言切换条 ===== */
.langs{
    position:relative;z-index:1;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:8px clamp(6px,.9vw,10px);
    width:min(1060px,100%);
    margin:clamp(14px,2.6vw,26px) auto 0;
    padding:0 2px;
    font-size:clamp(.76rem,1.8vw,.88rem);
}
.langs a{
    padding:6px 13px;
    line-height:1.4;
    color:var(--alice);
    border:1px solid rgba(var(--lime-rgb),.26);
    border-radius:999px;
    background:linear-gradient(160deg,rgba(var(--creeper-rgb),.16),var(--chip-a));
    box-shadow:0 6px 16px rgba(0,0,0,.4);
    transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,box-shadow .25s;
}
.langs a:hover,.langs a:focus-visible{
    transform:translateY(-3px);
    border-color:var(--lime);
    background:linear-gradient(160deg,rgba(var(--lime-rgb),.26),var(--chip-b));
    box-shadow:0 12px 24px rgba(0,0,0,.5),0 0 22px rgba(var(--lime-rgb),.3);
}
.langs a[aria-current]{
    color:var(--on-accent);
    font-weight:700;
    border-color:var(--lime);
    background:linear-gradient(160deg,var(--pill-a),var(--pill-b));
    box-shadow:0 0 20px rgba(var(--lime-rgb),.55);
    cursor:default;
}

/* ===== 主题切换按钮（固定右下角，颜色随主题走）===== */
.theme-toggle{
    position:fixed;
    right:clamp(10px,2.2vw,22px);
    bottom:clamp(12px,2.2vw,22px);
    z-index:60;
    display:inline-flex;
    align-items:center;
    gap:.45em;
    margin:0;
    padding:9px 15px;
    font-family:inherit;
    font-size:clamp(.72rem,1.8vw,.82rem);
    font-weight:700;
    line-height:1;
    color:var(--alice);
    border:1px solid rgba(var(--lime-rgb),.5);
    border-radius:999px;
    background:linear-gradient(160deg,rgba(var(--creeper-rgb),.34),var(--toggle-bg));
    box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 22px rgba(var(--lime-rgb),.22);
    -webkit-backdrop-filter:blur(10px) saturate(130%);
    backdrop-filter:blur(10px) saturate(130%);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s,background .25s,color .25s;
}
.theme-toggle:hover{
    transform:translateY(-3px);
    border-color:var(--lime);
    color:var(--link-hover);
    box-shadow:0 16px 34px rgba(0,0,0,.58),0 0 30px rgba(var(--lime-rgb),.45);
}
.theme-toggle:focus-visible{
    outline:2px solid var(--lime);
    outline-offset:3px;
    transform:translateY(-3px);
}
.theme-toggle:active{transform:translateY(-1px) scale(.97)}
.theme-toggle__icon{
    font-size:1.1em;
    line-height:1;
    filter:drop-shadow(0 0 6px rgba(var(--lime-rgb),.6));
}
.theme-toggle__label{white-space:nowrap}

/* ===== 响应式 ===== */
@media (max-width:820px){
    .platforms{grid-template-columns:1fr}
    .banners{grid-template-columns:1fr}
    .banners a{aspect-ratio:16/9}
    .videos{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media (max-width:520px){
    .page{border-radius:18px}
    .videos{grid-template-columns:1fr}
    .cta h1{font-size:1rem}
    .langs a{padding:5px 11px}
    .theme-toggle{padding:8px 12px;font-size:.74rem}
}

/* ===== 尊重系统「减少动态效果」设置 ===== */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
    .avatar:hover,.creeper,.platforms a:hover,.banners a:hover,
    .video:hover,.video-thumb:hover img,.cta h1:hover,.langs a:hover,
    .theme-toggle:hover,.theme-toggle:focus-visible{transform:none}
}

/* purple theme: enderman pixel face */
html[data-theme="purple"] .creeper::before{
    box-shadow:
        6px 12px 0 0 var(--face-eye),12px 12px 0 0 var(--face-eye),30px 12px 0 0 var(--face-eye),36px 12px 0 0 var(--face-eye);
}
